时间戳

首页 > 解决方案 > 如何在这里传递状态？

reactjs - 如何在这里传递状态？

问题描述

我有一个ModifyWordPartButton具有 stateisHovered和 child的组件IconButton。IconButton onclick那是另一个组件的子组件，SelectWordPartToModify，它有一个方法handleClickOpen()。IconButton应该能够拥有它的onClick= 。SelectWordPartToModifyhandleClickOpen()

使用此代码时：

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'srender()替换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

我该如何解决这个问题？

标签： reactjsstatereact-state

解决方案

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

SelectWordPartToModify

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

ModifyWordPart

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

这种方式，handleClickOpen必须在 中定义SelectWordPartToModify，并且可以在IconButtonusing中执行this.props.handleClick()。此外，您还拥有基于属性的classNameofIconButtonisHoveredModifyTwoPart

编辑：关于你的沙箱：

  1. 在第 78 行，ModifyWordPartButton你不应该写handleClickOpen={this.handleClickOpen}，而是onClick={this.handleClickOpen}：作为div一个简单的 DOM 元素，你不能像你自己的组件一样向它传递属性。

  2. 同样，在同一文件的第 71 行，您应该使用onClick代替handleClickOpen:IconButton确实是一个组件，但它属于 Material UI 并且似乎需要一个onClick道具。

  3. 此外，在这两行中你不应该写this.handleClickOpen，而是this.props.handleClickOpen，因为函数被传递给ModifyWordPartButton使用道具！

  4. 我猜第IconButton60-68 行的行SelectSuffixToModify可以在没有任何成熟的情况下被删除（如果我做对了你想做的事，那么把它留在那里根本没有用）。

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

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

相反，IconButton它是由其他人制作的，因此您应该知道它的道具是什么！我猜你可以在材料 UI 的官方文档中找到它的信息 :)

推荐阅读