如何在这里传递状态？

Question

我有一个组件 ModifyWordPartButton，它有一个状态 isHovered 和一个子组件 IconButton。 IconButton onclick 是另一个组件 SelectWordPartToModify 的子组件，它有一个方法 handleClickOpen()。 IconButton 应该能够拥有其 onClick = SelectWordPartToModify 的 handleClickOpen().

使用此代码时：

ModifyWordPartButton:

.
.
.
render() {
  return (
    <div>
      <IconButton className={this.state.isHovered ? 'hoveredClass' : null />
    </div>
  );
}

SelectWordPartToModify:

.
.
.
render() {
    <ModifyWordPartButton />
}

导致 IconButton 继承 ModifyWordPartButton 的 isHovered 状态但不继承 SelectWordPartToModify 的 handleClickOpen()。

当我使用这段代码时： ModifyWordPartButton:

.
.
.
render() {
  return (
    <div>
      {this.children}
    </div>
  );
}

SelectWordPartToModify:

.
.
.
render() {
  <ModifyWordPartButton onClick={this.handleClickOpen}>
    <IconButton onClick={this.handleClickOpen}
  </ModifyWordPartButton
}

IconButton 不继承 ModifyWordPartButton 的 isHovered 状态。

我尝试在 ModifyWordPartButton 的 render() 中将 this.props.children 替换为：

this.props.children.map(
  child => {
    React.cloneElement(child, this.state)
  }
)

但是 React 给了我一个关于无法识别 IconButton 的 isHovered 属性.

的错误

这是我使用的完整代码： https://codesandbox.io/s/zwlz41mo93?codemirror=1&eslint=1&fontsize=14

我该如何解决这个问题？

Answer 1

抱歉，我不完全理解你的问题，但是..你不能将多个道具传递给 IconButton 吗？类似于以下内容：

SelectWordPartToModify

render() {
    return <ModifyWordPart handleClick={this.handleClickOpen} />
}

ModifyWordPart

render() {
    return (
        <IconButton
            className={this.state.isHovered ? 'hoveredClass' : null}
            handleClick={this.props.handleClick} />
    );
}

这样，handleClickOpen 必须在SelectWordPartToModify 中定义，并且可以使用this.props.handleClick() 在IconButton 中执行。而且，你还有className的IconButton基于isHovered属性的ModifyTwoPart

编辑：关于您的沙箱：

在 ModifyWordPartButton 的第 78 行你不应该写 handleClickOpen={this.handleClickOpen} 而是 onClick={this.handleClickOpen}：作为一个 div 一个简单的 DOM元素，你不能像你自己的组件一样传递给它属性。
在同一文件的第 71 行，同样，您应该使用 onClick 而不是 handleClickOpen：IconButton 确实是一个组件，但它属于Material UI 似乎需要一个 onClick 道具。
此外，在这两行中你不应该写 this.handleClickOpen，而是 this.props.handleClickOpen，因为函数是使用 props 传递给 ModifyWordPartButton 的！
我猜SelectSuffixToModify的第60-68行的IconButton可以不加修饰地删除（如果我猜对了你想做的，那就不是把它放在那里很有用）。

我已经分叉了你的 sandCodebox，它就在这里 → https://codesandbox.io/s/6wxj4nyn6z 我认为它可以满足你的要求。

不过，我认为您需要澄清一下，因为根据您所写的内容，我认为您心里有些困惑。当您编写自己的组件时，您可以让他们期待您想要的道具：在您的示例中，ModifyWordPartButton 是您自己的组件，您以期望名为 handleClickOpen 的道具的方式创建他；因此，当您从 SelectSuffixToModify render() 方法调用它时，您可以使用 handleClickOpen={...}.

向它传递一个函数

相反，IconButton是别人做的，所以你应该知道它的道具是什么！我猜你可以在 material UI 的官方文档中找到它的信息 :)

如何在这里传递状态？

How to pass states here?

reactjs

state

react-state