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

Question

Message 组件包含一个锚元素和锚下方的一个段落。段落的渲染应该通过使用以下逻辑单击锚元素来切换：

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

标签： javascripthtmlreactjs

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 [phone] now!</p>}
      </React.Fragment>
    );
  }
}

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

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