javascript - 与语义 UI react ，动态添加 Prop

Question

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

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

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

我想要 handleHover() 做的是在鼠标悬停事件上向 Segment 动态添加语义 UI Prop 。我试着用 react clone element 做这个, 并根据语义 UI 文档添加新的颜色属性

React 文档状态:

Clone and return a new React element using element as the starting point. The resulting element will have the original element's props with the new props merged in shallowly.

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

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

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

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

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 回调时获得该新 Prop 。

You can change propName to color and this.state.propValue to 'teal', based on your example.