React类组件中OddEven方法无法返回元素问题求助

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是：你在按钮点击事件里调用OddEven方法返回的JSX，根本没有被React挂载到页面上。React组件的渲染逻辑是固定的——只有render方法里的JSX才会被渲染到DOM中，你在点击事件里返回的JSX，React完全不知道该把它放到哪里，自然就不会显示啦。

具体的修改方案 #

我们需要把判断后的结果存到组件的state里，然后在render方法里根据这个状态来渲染对应的内容。下面是修改后的完整代码：

class App extends React.Component {
  // 扩展state，增加存储结果的字段
  state = { 
    val: '',
    result: null 
  };

  handleChange = (e) => {
    this.setState({ val: e.target.value });
  }

  // 重写方法，不再返回JSX，而是更新state
  handleOddEven = () => {
    const num = this.state.val;
    const number = parseInt(num);
    let description;
    if (Number.isInteger(number)) {
      if (number % 2 === 0) {
        description = <strong>even</strong>;
      } else {
        description = <i>odd</i>;
      }
      // 把要显示的内容存到state里
      this.setState({
        result: (
          <div>
            <h1>Test</h1>
            <p>The number {number} is {description}</p>
          </div>
        )
      });
    } else {
      // 如果不是有效数字，提示用户
      this.setState({ result: <p>Please enter a valid integer!</p> });
    }
  }

  render() {
    return (
      <div>
        <input type='text' onChange={this.handleChange} />
        <button onClick={this.handleOddEven}> Odd Even </button>
        {/* 在这里渲染state里的结果 */}
        {this.state.result}
      </div>
    );
  }
}

ReactDOM.render( <App />, document.getElementById('root') );

关键改动说明 #

• 给state新增了result字段，用来存储我们要显示的结果内容
• 把原来的OddEven方法改成handleOddEven，它的作用不再是返回JSX，而是计算完结果后通过setState更新状态
• 在render方法里，我们添加了{this.state.result}，这样当state更新时，React会自动重新渲染，把结果显示出来

为什么原来的写法不行？ #

你之前的OddEven方法虽然返回了<h1>Test</h1>，但这个返回值只是一个JSX对象，没有被插入到组件的DOM树中。React的渲染机制是：只有render方法返回的JSX才会被转化为真实DOM并挂载，点击事件里的函数返回值不会被React处理，所以自然看不到效果啦。

内容的提问来源于stack exchange，提问作者nevil david