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

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 {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; value1: "Link 1",&nbsp; &nbsp; &nbsp; showValue1: false,&nbsp; &nbsp; &nbsp; value2: "Link 2",&nbsp; &nbsp; &nbsp; showValue2: false,&nbsp; &nbsp; &nbsp; value3: "Link 3",&nbsp; &nbsp; &nbsp; showValue3: false&nbsp; &nbsp; };&nbsp; }&nbsp; click1 = () => {&nbsp; &nbsp; this.setState({ showValue1: !this.state.showValue1 });&nbsp; };&nbsp; click2 = () => {&nbsp; &nbsp; this.setState({ showValue2: !this.state.showValue2 });&nbsp; };&nbsp; click3 = () => {&nbsp; &nbsp; this.setState({ showValue3: !this.state.showValue3 });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => this.click1()}>Link 1</button>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.showValue1 && <h2>{this.state.value1}</h2>}&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => this.click2()}>Link 2</button>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.showValue2 && <h2>{this.state.value2}</h2>}&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => this.click3()}>Link 3</button>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.showValue3 && <h2>{this.state.value3}</h2>}&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}