当组件作为另一个组件的道具传递时，如何通过道具？

Question

我的组件如下：

const ArrowDownIcon = (name:string) => (
  <MaterialCommunityIcons
    name={name}
    size={50}
    color={theme.colors.text}
  />
);

然后，我应该将上述组件作为道具传递给以下组件：

const Dropdown = () =>{
  <DropDownPicker
    ArrowDownIconComponent={ArrowDownIcon}
  />
}

但是它不起作用，因为我应该将name的道具传递给arrowdowniconcomponent。有人可以向我解释一下该怎么做吗？

Answer 1

这里没有错，在下拉picker中，您只需要渲染arrowdowniconcomponent

const DropDownPicker = ({ArrowDownIconComponent}) => (
  ...
  <ArrowDownIconComponent />
  ...
)

您也可以使用这种方式使用

const Dropdown = () =>{
  <DropDownPicker
    arrowDownIconComponent={<ArrowDownIconComponent />}
  />
}


const DropDownPicker = ({arrowDownIconComponent}) => (
  ...
  { arrowDownIconComponent }
  ...
)

Answer 2

您可以以这种方式将名称作为道具传递

<DropDownPicker
   ...
   ArrowDownIconComponent={() => <ArrowDownIconComponent name="box" />}
   ...
/>