Question

Semantic-UI有我正在使用的这个React组件Segment。

在我的应用程序中，我正在使用带有Segment的onMouseOver，如下所示：

render() {
    return (
      <Segment onMouseOver={this.handleHover} />
    );
  }

我想handleHover（）要做的是在鼠标悬停事件上动态地将语义UI道具添加到Segment。我尝试使用react clone element执行此操作，并根据语义UI文档添加新的颜色道具

React docs state：

克隆并使用element作为起始返回一个新的React元素点。结果元素将具有原始元素的道具新道具合并得很浅。

handleHover() {
    React.cloneElement(Segment, {
      color: "teal"                  //NEWLY ADDED
    });

    //THIS EXECUTES SO EVENT IS TRIGGERING.
    console.log("I'm in here");
  }

因此，即使克隆了React Component，当我将鼠标悬停在Segment上时，它仍然不会显示新的颜色属性。

问题：这是动态添加道具的正确方法吗？如果是这样，那么为什么不显示新添加的颜色。如果没有，那么我应该如何更改我的代码呢？

Answer 1

您可以将所需的任何道具值添加到当前组件的状态，并更改该值onMouseOver：

constructor(props) {
  super(props);

  this.state = {
    propValue: undefined
  }
  this.handleHover = this.handleHover.bind(this);
}

handleHover(event) {
  this.setState({propValue: 'hover'});
}

render() {
  return (
    <Segment onMouseOver={this.handleHover} propName={this.state.propValue} />
  );
}

this.state.propValue的值将从undefined更改为hover，Segment组件将在调用onMouseOver回调时获得新的道具。

您可以根据您的示例将propName更改为color，将this.state.propValue更改为'teal'。

与语义UI反应，动态添加道具

1 个答案: