(React) 在已经返回一些内容后根据状态渲染组件

Question

我制作了一个下拉菜单，其中包含用户可以选择的不同编解码器，然后根据用户选择的编解码器，我想呈现另一个组件，该组件为用户提供与该编解码器相关的选项。例如，如果用户选择 MP3，我想显示我的 <MP3Options/> 组件。问题是除了编解码器下拉菜单之外，我不知道如何呈现 <MP3Options/> 组件。我目前所拥有的使<MP3Options/> 组件在选择 MP3 时应显示，但编解码器下拉菜单不再显示。这不好，因为如果用户决定选择另一个编解码器，他们就不能因为下拉菜单不再显示。

我相信这是因为我返回了<MP3Options/>，因此其余代码（用于显示下拉菜单）没有执行。我想要继续显示下拉菜单并显示所选编解码器的适当组件（例如，<MP3Options/>，如果选择了 MP3）。

这是我的代码（我不能将 if (this.state.value === 'MP3') 行放在下拉菜单 div 之后，因为那样 this.state.value 不起作用或其他什么）：

import React from 'react'
import MP3Options from './MP3'

class CodecSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "AAC"};
  }
  onCodecChange = (event) => {
    this.setState({value: event.target.value})
  }

  render() {
    if (this.state.value === 'MP3') {
      return <MP3Options/>
    }
    return (
      <div>
        <select id="codecs" onChange={this.onCodecChange} value={this.state.value}>
          <option value="AAC">AAC (.m4a)</option>
          <option value="AC3">AC3 (Dolby Digital)</option>
          <option value="ALAC">ALAC</option>
          <option value="CAF">CAF (.caf)</option>
          <option value="DTS">DTS</option>
          <option value="FLAC">FLAC</option>
          <option value="MKA">MKA (extract audio without encoding it)</option>
          <option value="MKV">MKV (.mkv)</option>
          <option value="MP3">MP3</option>
          <option value="MP4">MP4 (.mp4)</option>
          <option value="Opus">Opus (.opus)</option>
          <option value="Vorbis">Vorbis (.ogg)</option>
          <option value="WAV">WAV</option>
        </select>
      </div>
    );
  }
}

export default CodecSelector;```

Answer 1

我相信您正在寻找的是有条件地渲染您的组件，

import React from 'react'
import MP3Options from './MP3'

class CodecSelector extends React.Component {

  constructor(props) {
    super(props);
    this.state = { value: "AAC" };
  }

  onCodecChange = (event) => {
    this.setState({ value: event.target.value })
  }

  renderComponent = () => {
    const { value } = this.state;
    switch (value) {
      case 'AAC':
        return <AACOptions />;
      case 'MP3':
        return <MP3Options />;
      default:
        return null;
    }
  }

  render() {
    return (
      <div>
        <select id="codecs" onChange={this.onCodecChange} value={this.state.value}>
          <option value="AAC">AAC (.m4a)</option>
          <option value="AC3">AC3 (Dolby Digital)</option>
          <option value="ALAC">ALAC</option>
          <option value="CAF">CAF (.caf)</option>
          <option value="DTS">DTS</option>
          <option value="FLAC">FLAC</option>
          <option value="MKA">MKA (extract audio without encoding it)</option>
          <option value="MKV">MKV (.mkv)</option>
          <option value="MP3">MP3</option>
          <option value="MP4">MP4 (.mp4)</option>
          <option value="Opus">Opus (.opus)</option>
          <option value="Vorbis">Vorbis (.ogg)</option>
          <option value="WAV">WAV</option>
        </select>
        {this.renderComponent()}
      </div>
    );
  }
}

export default CodecSelector;