将道具传递给动态反应组件

Posted 2023-02-23

【中文标题】将道具传递给动态反应组件

【英文标题】：Passing props to dynamic react component

【发布时间】：2019-01-27 01:12:08

【问题描述】：

所以我有下面的代码来加载一个名为 foo 的自定义组件。组件的加载工作正常，但 props 并没有像我希望的那样传递给它

Container component

....
const id= foo
React.createElement(LoadComponent(id, attributes))
...

Custom component

export const LoadComponent = (id, attributes) => 
    /*This will load up foo.js*/
    const Component = require(`./$id`);

    return Component;
;

在这种情况下，如何将属性 prop 传递给组件？我不断收到渲染异常。

【参考方案1】：

这是一个简化的演示：https://codesandbox.io/s/zrw7x1zrrp

props 正在作为createElement 的第二个参数传递给组件

const id = "foo";
const LoadComponent = props => 
  return props.id;
;

ReactDOM.render(
  React.createElement(LoadComponent,  id , null),
  document.getElementById("root")
);

React.createElement(component, props, ...children)

https://reactjs.org/docs/react-without-jsx.html

【参考方案2】：

您正在尝试做的事情有点令人困惑。如果您使用 JSX，则不需要调用 React.createElement。

如果你坚持不使用 JSX，React.createElement 可以按照React's API 采用 3 个参数。因此，在您的情况下，您的代码将是 React.createElement(LoadComponent, id, attributes , null)，其中第三个参数是孩子。

现在，可以从自定义组件的 props 对象中访问 id 和 attributes。所以你有两个选择：

Destructureprops 对象：

export const LoadComponent = ( id, attributes ) => 
    /*This will load up foo.js*/
    const Component = require(`./$id`);

    return Component;
;

直接使用 props 对象：

export const LoadComponent = (props) => 
    /*This will load up foo.js*/
    const Component = require(`./$props.id`);

    return Component;
;