Блог

Я создал выпадающее меню с различными кодеками, которые пользователь может выбрать, а затем, в зависимости от выбранного пользователем кодека, я хочу визуализировать другой компонент, который предоставляет пользовательские опции, связанные с этим кодеком. Например, если пользователь выбирает MP3, я хочу показать свой <MP3Options/> компонент. Проблема в том, что я не знаю, как визуализировать <MP3Options/> компонент в дополнение к выпадающему меню codecs. То, что у меня есть в настоящее время, заставляет <MP3Options/> компонент отображаться так, как он должен, когда выбран MP3, но выпадающее меню codecs больше не отображается. Это нехорошо, потому что, если пользователь решит вместо этого выбрать другой кодек, он не сможет, поскольку выпадающее меню больше не отображается.

Я полагаю, это потому, что я возвращаюсь <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;```
 

Я считаю, что то, что вы ищете, — это условный рендеринг ваших компонентов,

 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;