Reactjs 是否可以使用setState中的回调函数返回和显示组件？

当从下拉列表中选择一个选项时，我试图显示一个组件。我还不能显示“Func”组件或任何HTML，但可以将内容记录到控制台

import React from 'react';
import Func from './components/Func'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: ''
    }
    this.handleChange = this.handleChange.bind(this)
    this.changeFunc = this.changeFunc.bind(this)

  }

  handleChange(e) {
    this.setState({
      option: e.target.value
    }, this.changeFunc);
  }

  changeFunc() {
    return <Func />
  }

  render() {
    return (
      <div>
        <label htmlFor="Func">Choose: </label>
        <select name="options" id="options" onChange={this.handleChange}>
          <option value=""></option>
          <option value="Currency Converter">Currency Converter</option>
          <option value="Win!">Win!</option>
        </select>
      </div>
    )
  }
}

export default App;

从“React”导入React；
从“./components/Func”导入Func
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选项：“”
}
this.handleChange=this.handleChange.bind（this）
this.changeFunc=this.changeFunc.bind（this）
}
手变（e）{
这是我的国家({
选项：e.target.value
}，this.changeFunc）；
}
changeFunc（）{
返回
}
render（）{
返回(
选择：
货币转换器
赢
)
}
}
导出默认应用程序；

实际上没有太多，但是Func组件：

import React, { Component } from 'react';

class Func extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h2>
        func
      </h2>
    );
  }
}

export default Func;

import React，{Component}来自'React'；
类Func扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
func
);
}
}
导出默认函数；

尝试此操作，保留一个切换标志，该标志在执行操作时变为真。您可以使用它根据切换调用

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: '',
      toggle: false
    }
    this.handleChange = this.handleChange.bind(this)
    this.changeFunc = this.changeFunc.bind(this)

  }

  handleChange(e) {
    this.setState({
      option: e.target.value, toggle:!this.state.toggle
    });
  }

  render() {
    return (
      <div>
        <label htmlFor="Func">Choose: </label>
        <select name="options" id="options" onChange={this.handleChange}>
          <option value=""></option>
          <option value="Currency Converter">Currency Converter</option>
          <option value="Win!">Win!</option>
        </select>
        {this.state.toggle?
         <Func/>
         :null}
      </div>
    )
  }
}

export default App;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选项：“”，
切换：false
}
this.handleChange=this.handleChange.bind（this）
this.changeFunc=this.changeFunc.bind（this）
}
手变（e）{
这是我的国家({
选项：e.target.value，toggle:！this.state.toggle
});
}
render（）{
返回(
选择：
货币转换器
赢
{this.state.toggle？
：null}
)
}
}
导出默认应用程序；

如果要将其嵌入此组件中，可以使用渲染方法中的条件来处理它：

render() {
    return (
      <>
        <div>
          <label htmlFor="Func">Choose: </label>
          <select name="options" id="options" onChange={this.handleChange}>
            <option value=""></option>
            <option value="Currency Converter">Currency Converter</option>
            <option value="Win!">Win!</option>
          </select>
        </div>

        {
           this.state.option &&
              <YourComponent/>
        }
      </>
    )
  }

---

你没有在render方法的JSX中使用

，那么为什么它会呈现？我们可以看到

？作为编辑添加到帖子@redbaron下面的答案对你来说应该非常有用@begdevworks！！非常感谢你的帮助！我不能100%确定的部分是“toggle:！this.state.toggle”-这是否仅仅意味着toggle将被设置为与其先前值相反的值？因此，如果它是假的，则将其设置为真，反之亦然。因此，您可以使用该切换来显示和隐藏基于相同操作的

。谢谢！目前正忙于一些需要在组件之间切换的任务，感谢您的帮助！

changeFunc() {
  // This can be whatever element you want (doesn't have to be body)
  const container = document.getElementById("body");
  ReactDOM.render(<Func/>, container);
}