通过函数指针渲染React组件并传递Props

你的问题出在组件渲染和props传递的语法错误上，直接在函数调用后加DOESNOTWORKPROP="Test"完全不符合React语法规则。下面给你两种可行的解决方式：

方法1：用JSX语法渲染组件（推荐） #

React中，组件函数可以直接以JSX标签形式使用，props通过标签属性传递。注意要给每个子组件加唯一的key属性（避免React警告）：

function Component1(props) {
    return(
        <h1>Hello from Component 1, props: {props.testProp}</h1>
    );
}

function Component2(props) {
    return(
        <h1>Hello from Component 2, props: {props.testProp}</h1>
    );
}

export const componentObject = [{
    name: "Component1",
    pointer: Component1
}, {
    name: "Component2",
    pointer: Component2
}];

function ParentComponent(props) {
    return (
        <div>
            {componentObject.map((item) => {
                const Child = item.pointer;
                return (
                    <span key={item.name}>
                        <Child testProp="Test" />
                    </span>
                );
            })}
        </div>
    );
};

方法2：直接调用组件函数传递props #

React组件本质就是接收props参数的普通函数，可直接调用函数并把props作为参数传入：

function Component1(props) {
    return(
        <h1>Hello from Component 1, props: {props.testProp}</h1>
    );
}

function Component2(props) {
    return(
        <h1>Hello from Component 2, props: {props.testProp}</h1>
    );
}

export const componentObject = [{
    name: "Component1",
    pointer: Component1
}, {
    name: "Component2",
    pointer: Component2
}];

function ParentComponent(props) {
    return (
        <div>
            {componentObject.map((item) => (
                <span key={item.name}>
                    {item.pointer({ testProp: "Test" })}
                </span>
            ))}
        </div>
    );
};

额外注意点 #

• 子组件必须定义props参数，否则无法接收传递的值。
• 遍历渲染列表时必须加key属性，建议用数组中唯一标识（比如item.name）。

内容的提问来源于stack exchange，提问作者Grant Curell