Javascript 通过React Redux使用选择器挂钩作为道具

先驱：我对Redux相当陌生，但我对编码了解得足够多，我知道下面的解决方案并不理想。虽然它可以工作，但我对使用eval（）并将钩子作为字符串传递还是很不确定。我想看看是否有更好的方法来做到这一点，或者React Redux是否有一个内置的功能来实现我想要实现的目标

场景：下面代码中的所有my ChildComponent都是通用组件（下拉列表等），不应该包含将它们链接到特定项目的代码；我正在尽可能地保持它们的通用性。但是，当checkBox1触发分派以更改存储区中的Item1时，我只希望重新呈现预期的下拉列表（dropdown2），而不是整个ParentComponent（扩展为所有子项）。我还希望dropdown2在商店中每次更改Item1时都更新它的选项。我能想到的唯一方法是在子组件中部署useSelector钩子，而不必重新启动整个ParentComponent。但我不想在子级中显式声明钩子，因为这违反了抽象，迫使我将变通代码放在通用下拉组件中

旁注：我考虑过如何在父级中声明useSelector并防止它强制重新播放，但是在dropdown2上仍然需要更改道具，这仍然会强制父级的重新播放以反映dropdown2的新道具

const ParentComponent = () => {

  let passSelector = "selector(state => state.Item1 ? state.Item2.concat(state.Item3) : state.Item2)";

  let dropdown1 = <Dropdown input={[thing1, thing2]} />;
  let dropdown2 = <Dropdown input={passSelector} />
  let checkbox1 = <Checkbox onClick={() => dispatch(toggleItem1)} />;

  let menu1 = [dropdown1];
  let menu2 = [dropdown2, checkbox1];

  return (
    <div>
      <Checkbox1 onClick={doThing} />
      <Switch onSwitch={switchyThing} />
      {mode &&
         menu1
      }
      {!mode &&
         menu2
      }
    <div/>
  );
}

const Dropdown = ({input}) => {
  const selector = useSelector; // Grabbed from the import statements to force importation.
  const options = (typeof input === 'string') ? eval(input) : input;

  ... some other code ...

  return (
    {options && options.map(option => {
      ...do thing with option...
    }
  );
}   

constparentcomponent=（）=>{
让passSelector=“选择器（state=>state.Item1？state.Item2.concat（state.Item3）：state.Item2）”；
让下拉1=；
让下拉2=
让checkbox1=dispatch（toggleItem1）}/>；
设menu1=[dropdown1]；
设menu2=[dropdown2，checkbox1]；
返回(
{模式&&
菜单1
}
{！模式&&
菜单2
}
);
}
常量下拉列表=（{input}）=>{
const selector=useSelector；//从导入语句中抓取以强制导入。
const options=（输入类型=='string'）？eval（输入）：输入；
…其他一些代码。。。
返回(
{options&&options.map（option=>{
…用选项做事情。。。
}
);
}   

您可能只需要将要用作选择器的函数从父级传递给子级，而不是字符串。类似这样吗

const ParentComponent = () => {

  const selector = state => state.Item1 ? [...state.Item2, ...state.Item3] : state.Item2;

  return (
    <div>
      <Dropdown selector={selector} />
    <div/>
  );
}

const Dropdown = ({selector}) => {
  const options = useSelector(selector);

  //... some other code ...

  return (
    {options && options.map(option => {
      //...do thing with option...
    }
  );
}   

constparentcomponent=（）=>{
const selector=state=>state.Item1？[…state.Item2，…state.Item3]：state.Item2；
返回(
);
}
常量下拉列表=（{selector}）=>{
常量选项=使用选择器（选择器）；
//…其他一些代码。。。
返回(
{options&&options.map（option=>{
//…用选项做事情。。。
}
);
}   

为什么不将useSelector导入要使用的位置？