React-传递独特的React组件作为道具

Question

I'm interested in understanding the best practice when it comes to passing down React components as a prop, particularly when passing unique components.

Some example pseudocode

import IconOne;
import IconTwo;
import IconThree;

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

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

The icons I have are unique, in the sense that they render an svg icon. Is it bad practice to do so?

Answer 1

There is nothing wrong with your example, but render functions are currently quite a trend. Presumably for the additional level of control via props passing and lazy evaluation. Also: 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)} />
    )
}