根据状态显示/隐藏 React 组件答案

【问题标题】：Show/Hide React Component based on State根据状态显示/隐藏 React 组件
【发布时间】：2022-10-25 17:38:15
【问题描述】：

我对 React 很陌生，正在尝试创建一个页面，单击颜色方块将显示该颜色的十六进制代码。我尝试了很多不同的事情，但我无法弄清楚我的问题是在事件处理、状态处理中，还是在其他方面。我可以让十六进制代码存在或不存在，但当我点击时它不会改变。

这是我的主要内容：

    <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,
        };
        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",
        };

        var hexTextVis = {
          ...hexText,
          visibility: "visible"
        }

        var hexTextInvis = {
          ...hexText,
          visibility: "hidden"
        }

        var isVisible = this.props.isVisible;

        if (isVisible) {
          return <p style={hexTextVis}>{this.props.color}</p>;
        } else {
        return <p style={hexTextInvis}>{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);
        console.log('clicking');
      }

      render() {
        var fullBoxStyle = {
          padding: 0,
          margin: 10,
          backgroundColor: "#fff",
          boxShadow: "3px 3px 5px #808080",
          boxRadius: "5px 5px",
          height: 200,
          width: 150,
        };
        var buttonStyle = {
          width:150,
          backgroundColor: this.props.color
        }

        return (
          <div style={fullBoxStyle}>
            <span onClick={(e) => this.handleClick()}>
              <ColorSquare color={this.props.color} />  
              <span style={{
                isVisible: this.state.isVisible ? "true" : "false",
              }}>                        
              <HexDisplay color={this.props.color} />
              </span>
            </span>   
            
          </div>
        );
      }
    }

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

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

创建对象时，它是一个hexTextVis 对象。当您单击时，isVisible 会发生变化，但它仍然是 hexTextVis 对象，因此渲染不会改变。您可以执行以下操作：

<HexDisplay visibility={state.isVisible}/>

或者

{state.isVisible ? <div/> : <HexDisplay />}

【讨论】：

【解决方案2】：

style={{
  isVisible: this.state.isVisible ? "true" : "false",
}}

没有具有此名称的 css 属性。也许您打算使用visibility？

style={{
  visibility: this.state.isVisible ? "visible" : "hidden"
}}

【讨论】：

【解决方案3】：

尝试包装 span 并使用三元运算符渲染 span 元素，基于 isVisible 的条件是否等于 true，否则不应返回任何内容

{this.state.isVisible && <span><HexDisplay /></span>}

【讨论】：