Question

我有一个组件ModifyWordPartButton，它的状态为isHovered和一个子项IconButton。 IconButton onclick是另一个组件SelectWordPartToModify的子代，该子组件具有方法handleClickOpen()。 IconButton应该具有其onClick = SelectWordPartToModify的{{1}}。

使用此代码时：

handleClickOpen()：

ModifyWordPartButton

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

SelectWordPartToModify

导致. . . render() { <ModifyWordPartButton /> }继承IconButton的{{1}}状态，但不继承ModifyWordPartButton的{{1}}。

当我使用此代码时： isHovered：

SelectWordPartToModify

handleClickOpen()：

ModifyWordPartButton

. . . render() { return ( <div> {this.children} </div> ); }不继承SelectWordPartToModify的{{1}}状态。

我尝试在. . . render() { <ModifyWordPartButton onClick={this.handleClickOpen}> <IconButton onClick={this.handleClickOpen} </ModifyWordPartButton }的{{1}}中将IconButton替换为：

ModifyWordPartButton

但是React让我犯了一个错误，因为我无法识别isHovered的{{1}}属性。

这是我使用的完整代码： 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中定义，并且可以使用IconButton在this.props.handleClick()内部执行。此外，基于className的{{1}}属性，您还拥有IconButton的{{1}}

编辑：关于您的沙箱：

在isHovered的第78行，您不应该写ModifyTwoPart，而应该写ModifyWordPartButton：作为handleClickOpen={this.handleClickOpen}的简单DOM元素，您不能传递给它就像您自己的组件一样。
在同一文件的第71行，同样，您应该使用onClick={this.handleClickOpen}而不是div：onClick确实是一个组件，但是它属于Material UI，并且它属于似乎期望有一个handleClickOpen道具。
此外，在两行中都不应该写IconButton，而应该写onClick，因为该函数是通过道具传递给this.handleClickOpen的！
我猜想this.props.handleClickOpen的第60-68行的ModifyWordPartButton可以被删除而不会引起任何麻烦（如果我对您想做的事情表示正确，那么保留它就毫无用处了在那里）。

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

尽管如此，我认为您需要澄清一下，因为根据您所写的内容，我认为您的想法有些混乱。当您编写自己的Component时，可以使他们期望您想要的道具：在您的示例中，IconButton是您自己的Component，并且您以期望使用名为SelectSuffixToModify的道具的方式创建了他。因此，当您从ModifyWordPartButton handleClickOpen方法调用它时，可以使用SelectSuffixToModify将其传递给函数。

相反，render()是由其他人制造的，因此您应该知道它的道具！我想您可以在材料UI的官方文档中找到相关信息：）

如何在这里传递状态？

1 个答案: