Question

我有一个组成部分

 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> }

函数开始返回undefined而不是按钮名，为什么它会那样工作，我该如何解决？

Answer 1

您的代码中有一些错别字：

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

返回未定义而不是呈现html标签

1 个答案: