javascript - 如何使用 React 切换消息(Test-Dome 解决方案1)

Question

消息组件包含一个 anchor 元素和 anchor 下方的一个段落。应使用以下逻辑通过单击 anchor 元素来切换段落的呈现:

开始时，不应呈现该段落。单击后，应呈现该段落。再次单击后，不应呈现该段落。

Answer 1

您的解决方案可以通过仅在状态为 false 时隐藏段落而不更改整个返回值来稍微简化。

class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: 0
    };
  }

  clickHandler = e => {
    e.preventDefault();
    this.setState({
      visible: !this.state.visible
    });
  };

  render() {
    return (
      <React.Fragment>
        <a href="#" onClick={this.clickHandler}>
          Want to buy a new car?
        </a>
        {this.state.visible && <p>Call +11 22 33 44 now!</p>}
      </React.Fragment>
    );
  }
}

document.body.innerHTML = "<div id='root'> </div>";

const rootElement = document.getElementById("root");
ReactDOM.render(<Message />, rootElement);