返回 undefined 而不是渲染 html 标签答案

【问题标题】：return undifined instead of rendering html tag返回 undefined 而不是渲染 html 标签
【发布时间】：2019-03-14 11:25:22
【问题描述】：

我有一个组件

 import React from 'react'

export default function FilterRow (props){
 return (
   <div className="d-flex flex-row justify-content-between align-items-baseline">
     <label className="label-filter text-capitalize" htmlFor={props.id}>{props.text}</label>
     <button id={props.id} className="btn-filter" type="button" data-toggle="collapse" data-target={props.target}
      name={props.name}  onClick={props.buttonHandler}>
       { props.btnValue ?  "-"  :  "+" } 
     </button>
   </div>
  )
}

以及向该组件传递道具和功能的父组件功能：

  handleButtonStates = (event , prevState) => {
    const { name  } = event.target
    console.log("hi from" , name );
    this.setState(prevState => {
        return {[name] : !prevState[name]}
    })
  }

在父组件中的用法：

<FilterRow  id="sort-btn" text="sort by" btnValue={this.state.sortBtn}
                            buttonHandler={this.handleButtonStates} target="#collapseSort" name="sortBtn"/>

当我使用这个函数进行条件渲染时 - 和 + 它工作正常但是当我在 fas 图标或任何其他类似的 html 标记上更改 - 和 + 时

{ props.btnValue ?  <label>y</label>  :  <label>no</label> }

函数开始返回未定义而不是按钮名称，为什么会这样工作，我该如何解决？

【问题讨论】：

标签： html reactjs jsx

【解决方案1】：

您的代码中有一些拼写错误：

Labe => label and <Label => <Label>

【讨论】：