React.js：将道具传递给道具？答案

【问题标题】：React.js: Passing props to props?React.js：将道具传递给道具？
【发布时间】：2017-10-03 07:38:47
【问题描述】：

我正在通过在线课程学习 React，并且偶然发现了一个属性附加到另一个属性的情况，如下所示：

this.props.property01(this.props.property02)

看到导师只是简单地解决了这行代码，我不禁对这种“连接”语法实际上代表什么感到困惑，即它在幕后导致了什么。来自 Vanilla JS 看起来 property02 被用作 property01 的参数，但这似乎太简单了一个答案。话虽这么说，我对剩下的代码非常了解。

为了提供一些上下文，我创建了这个代码笔，我上面提到的问题由this.props.onDelete(this.props.whichItem); 给出。

鉴于我找不到任何相关问题，我将不胜感激对此问题进行一些有见地的阐述。

【问题讨论】：

是的。看起来property2 是property1 的参数，为什么不呢？只要您可以像这样<Component onDelete={() => this.deleteItem} /> 将函数作为道具发送传递道具时避免绑定daveceddia.com/avoid-bind-when-passing-props

【解决方案1】：

React 组件的属性可以是函数。当我看到：

this.props.property01(this.props.property02)

我认为：

这意味着该组件将用作：

<SomeComponent property01={(a) => { /* so something with "a" ... */ } property02={"someValue"} />

如果property02 仅用于传递给property01 而没有其他我更喜欢这样的东西：

<SomeComponent property01={(a) => { /* do something with "someValue" ... */ } />

这意味着不需要名为poperty02 的属性。

【讨论】：

【解决方案2】：

来自 Vanilla JS，看起来 property02 被用作 property01 的参数

就是这样，你是对的。

this.props.property01(this.props.property02)

property01 是方法，property02 是参数。

对于其他看到此的人的更详细的解释：

假设此行位于名为MyComponent 的组件中，而property01 是MyComponent 中的一个道具。

父组件的 render() 方法，会包含如下内容：

<MyComponent property01={this.someMethod.bind(this)} />

其中someMethod 属于该父组件，但它在MyComponent（子组件）中作为property01 可用。

【讨论】：

【解决方案3】：

如果您能理解基本的反应代码，这个问题将对您有所帮助，因为在该代码中，我将 props 和 state 从父组件传递给了子组件。你可以玩它尝试做任何你想做的事情。

【讨论】：