Reactjs 将状态从组件转移到组件

我有一个功能组件，我需要从第一个组件获取状态并传输到列表组件

    const BlogPage = () => {
    ....
    return(
       <WithCallbacks options={breeds} title='породу' />
        <List breed="" />
    )}

*/} {this.state.selectedOptions.value}

您可以使用回调从

到
BlogPage
并将其作为道具传递给这两个组件

handleChange = (selectedOptions) => {
    setSelectedOptions(selectedOptions);
};

constblogpage=（）=>{
....
常量[品种，退化]=使用状态（“”）
返回(
/>
setBreed（hadleBreed）}/>
{console.log（繁殖）}
)}
导出带有回调扩展组件的默认类{
建造师（道具）{
超级（道具）
此.state={
选择选项：[]
};
...
this.handleChange=this.handleChange.bind（this）
}
handleChange=（selectedOptions）=>{
this.setState（{selectedOptions}）；
this.props.selectbride（selectedOptions.value）
}
...
你可以将状态作为道具传递给列表组件你可以获得更多详细信息吗，我是新手？）帮助，请不要将
所选选项
状态存储在
带回调的
组件中，你可以将其存储在父
博客页面
组件上，这样你也可以将其传递给
列表
。你可以传递
设置所选组件选项
作为带有回调的
的道具
。在带有回调的
中，您需要更改
handleChange
以调用
setSelectedOptions
。
const BlogPage = () => {
    const [selectedOptions, setSelectedOptions] = React.useState("");

    return (
       <WithCallbacks 
            options={breeds} 
            title='породу'
            selectedOptions={selectedOptions}
            setSelectedOptions={setSelectedOptions}
        />
        <List breed="" selectedOptions={selectedOptions} />
    )}
}

handleChange = (selectedOptions) => {
    setSelectedOptions(selectedOptions);
};

 const BlogPage = () => {
    ....
const [breed, setBreed] = useState("")
    return(
        />
      <WithCallbacks options={breeds.sort(compare)} title='породу'
        selectBreed={(hadleBreed) => setBreed(hadleBreed)} />
      {console.log(breed)}
      <List breed={breed} />
    )}


export default class WithCallbacks extends Component {
          constructor(props) {
            super(props)
            this.state = {
              selectedOptions: []
            };
            ...
            this.handleChange = this.handleChange.bind(this)
          }
          handleChange = (selectedOptions) => {
        this.setState({ selectedOptions });
        this.props.selectBreed(selectedOptions.value)
      }
        
          ...