Question

我很想了解将React组件作为prop传递的最佳实践，特别是在传递独特组件时。

一些示例伪代码

import IconOne;
import IconTwo;
import IconThree;

const arr = [
    { icon: IconOne },
    { icon: IconTwo },
    { icon: IconThree },
]

render() {
    return (
        {arr.map(item => (
            <Container icon={item.icon} />
        ))}
    )
}

我拥有的图标是独一无二的，因为它们会呈现一个svg图标。这样做是不好的做法吗？

Answer 1

您的示例没有任何问题，但渲染函数目前是一种趋势。据推测，通过道具传递和懒惰评估来进行额外的控制。另外：don't forget to pass keys。

import IconOne;
import IconTwo;
import IconThree;

const arr = [
    { title: 'one', render: props => <IconOne {...props} /> },
    { title: 'two', render: props => <IconTwo {...props} /> },
    { title: 'three', render: props> <IconThree {...props} /> },
]

render() {
    const foo = this.props.foo
    return arr.map( ({ title, render }) => 
        <Container key={title} renderIcon={() => render(foo)} />
    )
}

React - 将唯一的React组件作为道具传递

1 个答案: