Не могу ли я использовать функции и вызывать их, как указано в приведенном ниже коде?

Question

Я получаю следующее сообщение об ошибке в несколько строк: «Ожидается присваивание или вызов функции, и вместо этого я увидел выражение no-unused-expressionions». Я новичок в 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>
    );
  }
}