如何基于react-select中的选定值有条件地呈现数据

import React, { useState } from 'react';

function MyComponent() {
  const [selectedValue, setSelectedValue] = useState(null);

  // 其他代码

  return (
    // JSX代码
  );
}

export default MyComponent;

import React, { useState } from 'react';
import Select from 'react-select';

function MyComponent() {
  const [selectedValue, setSelectedValue] = useState(null);

  const handleSelectChange = (selectedOption) => {
    setSelectedValue(selectedOption);
  };

  return (
    <Select
      options={options} // 选项列表
      onChange={handleSelectChange} // 选项变化时的处理函数
      value={selectedValue} // 当前选定的值
    />
  );
}

export default MyComponent;

import React, { useState } from 'react';
import Select from 'react-select';

function MyComponent() {
  const [selectedValue, setSelectedValue] = useState(null);

  const handleSelectChange = (selectedOption) => {
    setSelectedValue(selectedOption);
  };

  let dataToRender = null;

  if (selectedValue === 'option1') {
    dataToRender = <div>选项1的数据</div>;
  } else if (selectedValue === 'option2') {
    dataToRender = <div>选项2的数据</div>;
  } else if (selectedValue === 'option3') {
    dataToRender = <div>选项3的数据</div>;
  }

  return (
    <div>
      <Select
        options={options} // 选项列表
        onChange={handleSelectChange} // 选项变化时的处理函数
        value={selectedValue} // 当前选定的值
      />
      {dataToRender}
    </div>
  );
}

export default MyComponent;