条件传递函数作为组件的道具答案

【问题标题】：conditional passing functions as props to a component条件传递函数作为组件的道具
【发布时间】：2022-01-28 20:40:02
【问题描述】：

我有这个面包屑组件，它映射道具并呈现如下芯片组件列表：

class BreadCrumb extends React.Component {
    render () {
      const {
        steps,
        activeIndex
      } = this.props;

      const chips = steps
        .map((step,index) => {

          return <Chip 
                  key={index} 
                  title={step.category} 
                  onClick = {()=> this.props.selectChip(index)}   // this should be passed only if 
                                                                  //                active == true
                  active={activeIndex >= index} />
              })

      return (
        <div className="chip-container">
            {chips}
        </div>
      )
    }
  }

只有当他的活动道具为真时，我才需要点击筹码，这是芯片组件

class Chip extends React.Component {
    render(){
      const {
        active,
        title
      } = this.props;

      const activeClassName = active ? 'chip active' : 'chip';

      return (
        <div 
            className = {activeClassName}
            onClick = {() => this.props.onClick()} >  
              <span>{title}</span>
        </div>
      )

    }
  }

只有在 active 属性为 true 的情况下，我才能使芯片可点击？

更多信息 selectChip() 函数设置组件 App 的状态，Breadcrump 组件的父级，因此它被绑定到 App 组件。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

你可以例如将 onClick 设为类方法并在内部使用简单条件：

class Chip extends React.Component {
    handleClick = () => {
       if (this.props.active) {
          this.props.onClick(); // call only if active props is true
       }
    }

    render() {
      const { active, title } = this.props;

      const activeClassName = active ? 'chip active' : 'chip';

      return (
        <div 
            className = {activeClassName}
            onClick = {this.handleClick}
        >  
            <span>{title}</span>
        </div>
      )

    }
 }

【讨论】：

【解决方案2】：

要么执行处理程序，要么执行一个空的function

onClick = {isActive ? this.props.onClick : () =>{} } >

【讨论】：

由于性能下降，最好避免在 JSX 中使用箭头函数
如果组件没有被记忆，这不会是一个问题。但这是一个很好的观点
这行得通，但我不确定这里发生了什么：( ) => { }
这是一个匿名函数的定义。相当于：function(){}。只是一个什么都不返回的函数。

【解决方案3】：

你可以这样做：-

// If chip component expects a function all the time
<Chip 
    key={index} 
    title={step.category} 
    onClick = {step.active ? ()=> this.props.selectChip(index) : () => {}}
    active={activeIndex >= index} />

// If onClick is an optional prop to chip component
<Chip 
    key={index} 
    title={step.category} 
    onClick = {step.active ? ()=> this.props.selectChip(index) : undefined}
    active={activeIndex >= index} />

【讨论】：

【解决方案4】：

// onClick 处理程序是可选的，可能是另一种解决方案

type ChipProps = {
  title: string;
  active: boolean;
  onClick?: ()=>void;
}

<Chip 
  key={index} 
  title={step.category}  
  active={activeIndex >= index} 
  {...(step.active ? {onClick:()=> this.props.selectChip(index)} : {})}
/>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。