React -如何通过将State作为道具传递，基于从另一个下拉列表中选择的内容填充另一个下拉列表

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [selectedValue, setSelectedValue] = useState(''); // 第一个下拉列表的选中值

  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value); // 更新选中值
  };

  return (
    <div>
      <select value={selectedValue} onChange={handleSelectChange}>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
      </select>
      <ChildComponent selectedValue={selectedValue} /> {/* 将选中值作为道具传递给子组件 */}
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent({ selectedValue }) {
  // 根据选中值动态生成第二个下拉列表的选项
  const options = selectedValue === 'option1' ? ['选项1-1', '选项1-2', '选项1-3'] :
                  selectedValue === 'option2' ? ['选项2-1', '选项2-2', '选项2-3'] :
                  selectedValue === 'option3' ? ['选项3-1', '选项3-2', '选项3-3'] :
                  [];

  return (
    <select>
      {options.map((option, index) => (
        <option key={index} value={option}>{option}</option>
      ))}
    </select>
  );
}

export default ChildComponent;