在 React.js 的点击事件中发送道具时保持道具绑定

Question

我们有一个组件被发送到一个函数，然后在 react.js 的其他地方呈现。这是为了能够打开具有给定内容的滑块。我们为该子组件提供了来自父组件的 props，当然，当我们第一次加载时一切都很好，但我们需要注意状态变化。例如：

<Contact
  handleNew={() => globalSlider.openContentSlider({
    content: <PersonalContactDetail _flags={_flags} />
  })}
/>

当然 _flags 在打开时适当设置，但状态更改不会级联。

有什么想法吗？

Answer 1

尝试传递一个返回标志的箭头函数，而不是直接返回标志

Answer 2

联系人组件上的属性需要更新，否则它不会重新呈现（因此无法重新呈现您的 PersonalContactDetail）。我当然不知道你的架构，但也许你可以将 _flags 传递到你的 Contact 组件，然后将它们作为参数传递回你的 handleNew() 处理程序....

<Contact flags={_flags}
  handleNew={(flagArgs) => globalSlider.openContentSlider({
    content: <PersonalContactDetail _flags={flagArgs} />
  })}
/>

...内部某处联系人：

if (this.props.handleNew) {
  this.props.handleNew(this.props.flags);
}

Keeping props bound when sending them in a click event in React.js