javascript - 将 props 传递给从对象动态渲染的组件

Question

我有一个充满组件的对象:

const Icons = {
   // commonly used darksky icon names
   "clear-day": <ClearDayIcon />,
   "clear-night": <ClearNightIcon />,
   "rain": <RainMediumIcon />,
   "snow": <SnowIcon />,
   "sleet": <RainHeavyIcon />,
   "wind": <WindyDayIcon />,
   // etc..
}

每个组件实际上只是一个包装为 React 组件的 svg。但我需要它从调用的地方接收 Prop ，尤其是 className Prop 。

我想要做的是通过以下方式从我的其他组件中调用这些组件:

<WeatherIcon icon={icon} className="some-class" />

图标属性将决定选择哪个图标组件。所以我尝试了这个:

const WeatherIcon = props => Icons[ props.icon ]

所以这部分有效，我可以写 <WeatherIcon icon={'clear-night'} /> ，并且渲染了正确的组件。但是，无法从我的 WeatherIcon 传递任何其他 Prop 。组件向下遍历每个 Icon 。例如，写 <WeatherIcon icon={'clear-night'} className="some-class" />显然没有通过className prop(或任何其他 prop)一直到每个单独的组件。我尝试做这样的事情:

const Icons = {
   "clear-day": props => <ClearDayIcon {...props} />,
   "clear-night": props => <ClearNightIcon {...props} />,
   // etc..
}

但这不起作用，因为现在我返回 Component而不是<Component /> 。我看到了问题Passing props to dynamically loaded components中的解决方案，但这些都建议调用像 { Icons['clear-day'](className: 'some-class', anotherProp: 'some-prop') } 这样的组件。我觉得这样不太优雅。一定有办法把它写成 <WeatherIcon icon={'some-icon'} className={'some-class'} someProp={'some-prop'} /> ，并正确过滤 props。 (我确实意识到所有的 props 都会一直过滤到我的 SVG 组件 - 这很好)。我觉得这里有一个更高阶的组件等待编写，但现在它却在逃避我。

感谢您的阅读

Answer 1

我不是 100% 确定这是否能满足您的要求，但我可能会尝试这样的事情；

const Icons = {
   "clear-day": ClearDayIcon,
   "clear-night": ClearNightIcon,
   "rain": RainMediumIcon,
   "snow": SnowIcon,
   "sleet": RainHeavyIcon,
   "wind": WindyDayIcon,
   // etc..
}

const Icon = ({icon, ...rest}) => {
    const IconComponent = Icons[icon]

    if(!IconComponent) {
        // Or throw an exception maybe.
        // At least print some console warnings in development env.
        return null;
    }

    return <IconComponent {...rest} />
}

通过这种方式，您可以选择一个 Icon 组件并将任何 prop 传递给它。而当你想使用它的时候，你可以这样使用它；

// ...
<Icon icon="clear-day" className="some-class" />
// ...