React with Semantic UI，动态添加道具

Question

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

在我的应用程序中，我将 onMouseOver 与 Segment 一起使用，如下所示：

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

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

React 文档状态：

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

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

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

所以即使在克隆了 React 组件之后，当我将鼠标悬停在 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，当onMouseOver 回调被调用时，Segment 组件将获得该新道具。

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