Question

嗨，我一直被这个问题困扰，只是开始使用react js。它是HOME js组件单击按钮时，我想显示一些文本（当flag为true时），否则它什么也不显示。

import React from 'react';

export default class Home extends React.Component{

 constructor(props)
 {
    super(props);
    this.state = {flag: false}
    this.showMe = this.showMe.bind(this);

 }
showMe()
 {
   this.state.flag ? ((<div> show this when flag is true </div>) : null)
 }


render()
{

    return(
        <div>
    <h1>Welcome to the Tornadoes Website {this.state.flag}</h1>
    <button type="button" onClick={this.showMe}>Click me </button>


  </div>);
}

}

控制台错误：

16:2:  Parsing error: Unexpected token, expected ":"

  14 |  {
  15 |    this.state.flag ? ((<div> show this when flag is true</div>) : null)
> 16 |  }
     |  ^
  17 |
  18 |
  19 | render()

Answer 1

您希望showMe处理程序仅更改状态。

showMe的返回正文应该在render函数中返回，因为您要返回JSX / HTML。

showMe() { 
  this.setState({flag: !this.state.flag})
}

render()
{

    return(
    <div>
      <h1>Welcome to the Tornadoes Website {this.state.flag}</h1>
      <button type="button" onClick={this.showMe}>Click me </button>
      {this.state.flag ? ((<div> show this when flag is true </div>) : null)}

    </div>
   );
}

React JS入门问题

1 个答案: