Question

从下拉列表中选择一个选项时，我试图显示一个组件。我无法显示“ 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;

除了Func组件之外，实际上并没有很多东西

import React, { Component } from 'react';

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

export default Func;

Answer 1

尝试此操作，请保留一个切换标记，该标记在执行操作时将变为true。而且您可以根据切换

使用它来调用<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;

Answer 2

如果希望将其嵌入此组件中，则可以在render方法中使用条件对其进行处理：

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/>
        }
      </>
    )
  }

如果您希望将其呈现为单独的组件，则可以直接使用ReactDOM.render()方法-通常用于模态或不需要嵌入的其他组件在应用程序的其余部分内。在这种情况下，您可以执行以下操作：

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

是否可以在setState中使用回调函数返回并显示组件？

2 个答案: