Question

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

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传递给组件？我不断收到渲染异常。

Answer 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（组件，道具，...孩子）

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

Answer 2

这有点令人困惑。如果您使用的是JSX，则无需调用var ci = new glob.CultureInfo(culture); glob.Calendar myCal = ci.Calendar;。

如果您坚持不使用JSX进行操作，则glob可以根据React's API接受3个参数。因此，在您的情况下，您的代码将是React.createElement，其中第三个参数是子代。

现在，可以从自定义组件的React.createElement对象中访问React.createElement(LoadComponent, { id, attributes }, null)和id。因此，您有两种选择：

Destructure道具对象：
```
attributes
```
直接使用道具对象：
```
props
```

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

2 个答案: