javascript - 通过三个级别的组件传递函数(即从孙组件调用函数)

Question

我想从子组件或孙组件传递项目 ID，但不知道如何操作。我看过的其他示例显示使用箭头函数来实现此目的，但无论出于何种原因，我的函数都没有被调用。

我在 Parent.js 中有以下内容:

chosenItem(id){
    console.log("CHOSEN ITEM SELECTED")
    this.setState({
        chosen_item: id
    })
}

在 Parent.js 渲染函数中:

<Child objects={objects} chosenItem={() => this.chosenItem()} />

然后在我的 Child.js 中我有:

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            text={item.label}
            onClick={item =>this.props.chosenItem(item.id)}
         />
     )
 })

在我的 Child.js 渲染函数中我有:

{items}

我也不确定实际的点击事件是否应该进入 Child.js 或 ClickableTextComponent。或者这真的很重要吗？目前我已将它放在 Child.js 组件中，如上所示。

我做错了什么？如何修改我的代码以便调用该函数？我已经阅读了一些关于 currying 以防止函数被多次重新创建的内容。在这种情况下有必要吗？如果是这样，我应该在哪里以及如何实现它。在我的父组件或子组件中？

更新

我之前试图让 onClick 从 Child.js 开始工作，但由于它需要附加到 div，我已将它移动到 ClickableTextComponent(孙组件)。

ClickableTextComponent 的一个问题是我希望能够在单击组件时设置状态，以便我可以将组件变成不同的颜色。因此，我需要使用一个函数来调用 chosenItem 函数。所以这是我的 `ClickableTextComponent.js' 中的内容:

handleClick(){
    this.setState({
        text_state: "clicked"
    })
    this.props.chosenItem()
}

然后在渲染中我有:

<div
    onClick={this.handleClick.bind(this)}
    onMouseOver={this.changeTextState.bind(this, "hover")}
    onMouseOut={this.changeTextState.bind(this, "default")}
>{this.props.text}</div>

新错误

基于上述更改，我现在得到 this.props.chosenItem is not a function。但是，我无法弄清楚为什么它会给我这个错误。当我向控制台显示 this.props 时，我可以看到函数名称。我究竟做错了什么？

Answer 1

Kevin He给出的答案是正确的。但该解决方案存在一个问题。

<Child objects={objects} chosenItem={(x) => this.chosenItem(x)} />

当你这样做时，每次你的 parent 都会被重新渲染。它将创建该函数的一个新实例。而且，您的子组件也会重新呈现，因为它看到 props 发生了变化。

最佳解决方案是:

<Child objects={objects} chosenItem={this.chosenItem} />

更新:

现在，它似乎有道理。

问题又出在 ClickableTextComponent 上。

这是有效的更新 ClickableTextComponent。

https://codesandbox.io/s/73x6mnr8k0

主要问题:

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            text={item.label}
            onClick={item =>this.props.chosenItem(item.id)}
         />
     )
 })

//
// Here you made a function (item) => this.props.choseItem(item.id)
// That means when you call that function you should call like this
// i.e. passing parameter needed for the function
// 

handleClick(){
    this.setState({
        text_state: "clicked"
    })
    this.props.chosenItem(item)
}

//
// But do you do not have the item in the children
// Parent should be changed as below
//

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            text={item.label}
            onClick={() =>this.props.chosenItem(item.id)}
         />
     )
 })

//
// Now you made a fuction () => this.props.chosenItem(item.id)
// The main difference being you are not taking a item as parameter
// item will be taken from outer scope that means, item from map
//

// 
// Another solution can be
// 

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            id={item.id}
            text={item.label}
            onClick={this.props.chosenItem}
         />
     )
 })

// And in ClickableTextComponent

handleClick(){
    this.setState({
        text_state: "clicked"
    })
    this.props.chosenItem(this.props.id)
}