Reactjs 将组件重构为具有条件样式的FunctionComponent（onMouseCenter/Leave）

所以我进入了React世界，完成了。我们最终得到一个FunctionComponent：

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Square extends React.PureComponent{ 
  constructor(props) {
    super(props);
    const { value, ...platformProps } = props;
    this.state = {
      isHovered: false,
      platformProps: platformProps,
    };
  }

  render() {
    return (
      <button
        className="square"
        {...this.state.platformProps}
        onMouseEnter={() => this.setState({isHovered: true})}
        onMouseLeave={() => this.setState({isHovered: false})}
        style={this.state.isHovered ? { backgroundColor: Color('indigo').lighten(0.5) } : {}}
      >
        {this.props.value}
      </button>
    );
  }
}

我的结果略有不同，我尝试解构道具，将特定于组件的道具与DOM属性分开：

function Square({value, ...domProps}) {
  return (
    <button
      className="square"
      {...domProps}
    >
      {value}
    </button>
  );
}

父组件是：

class Board extends React.PureComponent {
  renderSquare(i) {
    return (
      <Square
        value = {this.props.squares[i]}
        onClick = {() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

我想做的是在我悬停方形元素时在其上添加背景色。所以我决定为mouseEnter和mouseLeave添加处理程序，但当时我不知道该怎么做

因此，我将FunctionComponent更改为一个组件：

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Square extends React.PureComponent{ 
  constructor(props) {
    super(props);
    const { value, ...platformProps } = props;
    this.state = {
      isHovered: false,
      platformProps: platformProps,
    };
  }

  render() {
    return (
      <button
        className="square"
        {...this.state.platformProps}
        onMouseEnter={() => this.setState({isHovered: true})}
        onMouseLeave={() => this.setState({isHovered: false})}
        style={this.state.isHovered ? { backgroundColor: Color('indigo').lighten(0.5) } : {}}
      >
        {this.props.value}
      </button>
    );
  }
}

这是工作，但它的丑陋，我不想处理到方形组件的条件样式。我只想让Square成为我可以重用的低级组件。我错过了什么

---

这是使用useState钩子的等效函数组件

---

你能添加这个的代码沙盒吗？它在这个链接@DILEEPTHOMAS中真的很有帮助。好的，我会检查并更新。如果我认为Claudio已经发布了一个解决方案，请告诉我你是否需要进一步了解它的工作。但是它好吗？我可以在Board组件中定义dom属性并将events+style作为道具传递吗？老实说，我根本不会使用onMouseCenter和onMouseLeave，因为这是您只能通过CSS实现的。您应该使用onMouseCenter和/或onMouseLeave来处理更复杂的交互。关于另一个问题，是的，当然可以在Board组件中定义事件处理程序。实际上，这是修改游戏组件状态的唯一方法。这可能需要使用上下文API。当然，像redux这样的东西也可以是的，悬停就是一个例子。如何将当前位于'Square'中的事件处理程序移动到板上？我是说，如果没有第三方库，我可以摆脱Square中的状态管理吗？+我看到您使用arrow func来声明FunctionComponent，这是一种良好的做法还是一种口味偏好？如果您想避免道具钻取，并且不想使用第三方库（如redux），您必须使用上述方法。使用上下文，可以避免通过中间元素传递道具。在这种情况下，中间元素将是Board谢谢您的帮助和时间，非常感谢。