如何使用功能组件在道具中传递参数答案

【问题标题】：how to pass argument in props using functional component如何使用功能组件在道具中传递参数
【发布时间】：2017-12-27 09:18:51
【问题描述】：

如何使用函数式组件在 props 中传递参数，这里我给出了我的工作示例代码，让我解释一下，当我点击 PopUpHandle 时，我的点击事件将从PopUpHandle 触发，我需要从ContentSection 组件中获取值。 ContentSection 将是listing，当点击每个listing 时想要获取当前点击列表的value。我尝试使用我的console 打印的undefined 代码，但我不知道如何处理功能组件。

class mainComponent extends Component {
    constructor(props) {
        super(props);
        this.popTrigger = this.popTrigger.bind(this);
    }

    popTrigger(data){
        console.log(data);
    }

    render(){
        return(
            <Popup popTrigger={this.popTrigger} />
        )
    }
}
export default mainComponent;

弹窗组件

const PopUpHandle = ({ popTrigger, value}) => <li onClick={popTrigger.bind(this, value)} />;

const ContentSection =({popTrigger, value}) =>(
    <div>
        {value === 'TEST1' && (
        <div>
            <PopUpHandle popTrigger={popTrigger} value={value} />
          </div>
        </div>
        )}
        {value === 'TEST2' && (
        <div>
            <PopUpHandle popTrigger={popTrigger} value={value} />
          </div>
        </div>
        )}
    </div>
)

const ContentList = (({ items, popTrigger}) => (
    <div>
      {items.map((value, index) => (
        <ContentSection
          key={`item-${index}`}
          popTrigger={popTrigger}
          index={index}
          value={value}
        />
      ))}
    </div>
  )
);

    class example extends Component {
    constructor(props) {
        super(props);
        this.state = {
          items: ['TEST1', 'TEST2', 'TEST3', 'TEST4'],
        };
        this.popTrigger = this.popTrigger.bind(this);
    }

    popTrigger(){
        this.props.popTrigger()
    }

    render(){
        return(
            <ContentList popTrigger={this.popTrigger} items={this.state.items} />
        )
    }
}
export default example;

【问题讨论】：

标签： reactjs

【解决方案1】：

 popTrigger(data){
    console.log(data);
}

您在调用this.props.popTrigger() 时没有通过data。在 javascript 中，如果您没有传递参数，它会将其视为undefined。

【讨论】：

我错过了在添加问题时，如果我也添加，我会得到相同的结果。
@sedhuraghuraman 在您的“示例”类 propTrigger 中没有接收和传递值。
@JohnnyZabala 谢谢！我忘了提到班级名称。

【解决方案2】：

ContentSection 组件未传递 value 属性，因此它未传递给 PopUpHandle 组件。像这样传下去

render(){
    return(
        <ContentSection popTrigger={this.popTrigger} value={"test1"} />
    )
}

【讨论】：

我重写了上面的代码，你可以检查一下并告诉我。
您能否在PopupHandle 组件中使用console.log 值并检查它是否正确出现
我试过了，还是不行，我还是一样。