React组件显隐问题：点击色块无法切换十六进制代码显示状态

核心问题点 #

• HexDisplay组件未接收状态参数：你在HexParent里渲染HexDisplay时，没有将this.state.isVisible作为props传递给它，导致HexDisplay内部的isVisible始终是undefined，只会默认显示隐藏状态。
• 无效的CSS样式设置：包裹HexDisplay的<span>里设置了isVisible样式，这不是合法的CSS属性，无法控制显示/隐藏。
• setState异步日志误导：handleClick里直接console.log(this.state)会输出旧状态，因为React的setState是异步更新的，需要用回调函数才能看到最新状态。

修复后的完整代码 #

<main>
  <h1>Dynamic Hex Code Display</h1>
  <div id="container"></div>

  <script type="text/babel">
    class ColorSquare extends React.Component {
      render() {
        var blockStyle = {
          height: 150,
          backgroundColor: this.props.color,
          cursor: 'pointer'
        };
        return <div style={blockStyle} onClick={this.props.onClick}></div>;
      }
    }

    class HexDisplay extends React.Component {
      render() {
        var hexText = {
          fontFamily: "arial",
          fontWeight: "bold",
          padding: 15,
          margin: 0,
          textAlign: "center",
        };

        return <p style={{...hexText, visibility: this.props.isVisible ? "visible" : "hidden"}}>
          {this.props.color}
        </p>;
      }
    }

    class HexParent extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          isVisible: false
        };

        this.handleClick = this.handleClick.bind(this);
      }

      handleClick(e) {
        this.setState(currentVis => ({isVisible: !currentVis.isVisible}), () => {
          console.log(this.state.isVisible);
        });
        console.log('clicking');
      }

      render() {
        var fullBoxStyle = {
          padding: 0,
          margin: 10,
          backgroundColor: "#fff",
          boxShadow: "3px 3px 5px #808080",
          borderRadius: "5px 5px",
          height: 200,
          width: 150,
          display: 'inline-block'
        };

        return (
          <div style={fullBoxStyle}>
            <ColorSquare color={this.props.color} onClick={this.handleClick} />  
            <HexDisplay color={this.props.color} isVisible={this.state.isVisible} />
          </div>
        );
      }
    }

    ReactDOM.render(
      <div className="colorRow">
        <HexParent color="#ba2c9d" />
        <HexParent color="#2cba90" />
        <HexParent color="#2c9dba" />
      </div>,
      document.querySelector("#container")
    );
  </script>
</main>

额外优化点说明 #

• 修正了boxRadius为正确的CSS属性borderRadius。
• 给ColorSquare添加了cursor: 'pointer'，提升交互提示。
• 去掉了多余的<span>嵌套，直接给ColorSquare绑定点击事件，逻辑更清晰。
• 简化了HexDisplay的样式判断逻辑，避免重复定义样式对象。
• 将class改为React规范的className。

内容的提问来源于stack exchange，提问作者green_bean