小编Rev*_*n99的帖子

我正在使用 React router dom v6 如何访问第二个孩子的嵌套路由中的上下文

  <Routes>
    <Route element={<Parent/>}>
      <Route element={<Child/>}>
        <Route element={<ChildSecond/>}/>
      </Route>
    <Route> 
  </Routes>

我将上下文传递给Parent组件中的 Outlet 我想访问它，而无需在组件 OutletChildSecond中再次传递它Child

预期代码

父组件：

  const Parent = ()=>{
    const myContext = {someData:'hello world'}
    return <Outlet context={myContext}/>
  }

子组件：

  const Child = ()=><Outlet/>

ChildSecond 组件

  import {useOutletContext} from 'react-router-dom'
  const ChildSecond = ()=>{
      const {someData} = useOutletContext()
      return <div>someData</div>
  }

有没有办法即使在搜索其他内容后也始终在菜单上显示所选选项

这是我使用的代码

import React from "react";
import Select from "react-select/async";
const CheckboxDropdown = ({
  options,
  defaultValue,
  loadOptions,
  handleCheckboxSelect,
}) => {
  const selectDefaultValue = defaultValue;
  
  return (
    <div className="flex">
      <Select
        defaultMenuIsOpen
        defaultOptions={options}
        cacheOptions
        loadOptions={loadOptions}
        options={options}
        defaultValue={defaultValue}
        isMulti
        onChange={handleCheckboxSelect}
        noOptionsMessage={() => "No options available"}
        className="w-full"
        isClearable={false}
        placeholder="Type site name..."
      />
    </div>
  );
};
export default CheckboxDropdown;