我不能像下面的代码中提到的那样使用函数并调用它们吗？

Question

我在几行中收到以下错误消息 - “预期分配或函数调用，而是看到一个表达式 no-unused-expressions”。我是 React js 的新手。class Menu extends Component{   constructor(props){     super(props);   this.state={     value1: "Link 1",     value2: "Link 2",     value3: "Link 3"   } }   render(){     function Click1(){       <h2>{this.state.value1}</h2>     }     function Click2(){       <h2>{this.state.value2}</h2>     }     function Click3(){       <h2>{this.state.value3}</h2>     }   return(     <div>     <button  onClick={Click1}>Link 1</button><br></br>     <button onClick={Click2}>Link 2</button><br></br>     <button onClick={Click3}>Link 3</button><br></br> {/*        /* <a  onClick={Click1}>Link 1</a><br></br>     <a onClick={Click2}>Link 2</a><br></br>     <a onClick={Click3}>Link 3</a><br></br>  */} </div>   ) } }预期的输出是：-当我点击任何一个链接时，它应该在下一行显示为文本

Answer 1

所以我为你尝试了这个：

这样做是定义了 3 个用于显示链接或隐藏的处理程序，基本上是在单击按钮时切换显示/隐藏。

class Menu extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      value1: "Link 1",

      showValue1: false,

      value2: "Link 2",

      showValue2: false,

      value3: "Link 3",

      showValue3: false

    };

  }

  click1 = () => {

    this.setState({ showValue1: !this.state.showValue1 });

  };

  click2 = () => {

    this.setState({ showValue2: !this.state.showValue2 });

  };

  click3 = () => {

    this.setState({ showValue3: !this.state.showValue3 });

  };

  render() {

    return (

      <div>

        <button onClick={() => this.click1()}>Link 1</button>

        {this.state.showValue1 && <h2>{this.state.value1}</h2>}

        <br />

        <button onClick={() => this.click2()}>Link 2</button>

        {this.state.showValue2 && <h2>{this.state.value2}</h2>}

        <br />

        <button onClick={() => this.click3()}>Link 3</button>

        {this.state.showValue3 && <h2>{this.state.value3}</h2>}

        <br />

      </div>

    );

  }

}