javascript React.js：将嵌套的 props 传递给 React.createElement
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30440297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js: Passing nested props into React.createElement
提问by Allen
I have code of the form
我有表格的代码
props = { user: {userattr1: 1, userattr2: 2}};
var element = React.createElement(MyReactClass, props);
i.e., where props is a nested object. When I try to compile the above code I get the error:
即，其中 props 是一个嵌套对象。当我尝试编译上述代码时，出现错误：
Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.
警告：在作为子对象传递之前，任何对键控对象的使用都应包含在 React.addons.createFragment(object) 中。
I've been looking online and it seems that nested objects are perfectly permissible as props. How can I resolve my error?
我一直在网上查看，似乎嵌套对象完全可以作为道具。我该如何解决我的错误？
Edit: MyReactClasslooks something like this:
编辑：MyReactClass看起来像这样：
var MyReactClass = React.createClass({
render: function () {
<div>{this.props.user}</div>
}
})
回答by Giuseppe Pes
I don't think the problem, you are having is related to a nested object as props. Here it is an example:
我认为这不是问题，您遇到的问题与作为道具的嵌套对象有关。这是一个例子：
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.user.name}</div>;
}
});
var props = { user: {name: "World"}};
React.render(React.createElement(Hello, props), document.getElementById('container'));
More likely, your problem is related to how you are setting the keys of the children components. However, it is hard to tell without seeing the entire code.
更有可能的是，您的问题与您如何设置子组件的键有关。但是，如果没有看到完整的代码，就很难判断。
This is a link to the creeateFragmentfunction, it may help you. https://facebook.github.io/react/docs/create-fragment.html
这是该creeateFragment功能的链接，它可能对您有所帮助。https://facebook.github.io/react/docs/create-fragment.html
回答by KyleMit
If you're using JSX, you can also pass a nested object as a prop by building the object like this:
如果您使用的是 JSX，您还可以通过像这样构建对象来将嵌套对象作为 prop 传递：
<HelloWorldClass user={{name:'Kyle'}} />
Syntax Example in Stack Snipets
Stack Snipets 中的语法示例
// function component syntax
function HelloWorldFunc(props) {
return (
<div>Hello, {props.user.name} </div>
);
}
// class component syntax
class HelloWorldClass extends React.Component {
render() {
return (
<div >
Hello, {this.props.user.name}
</div>
);
}
}
// createElement syntax
const helloCreate = React.createElement(HelloWorldFunc, {user:{name:'Kyle'}});
// JSX syntax
const helloJSX = <HelloWorldClass user={{name:'Kyle'}} />
ReactDOM.render(
<div>
{helloCreate}
{helloJSX}
</div>
,document.querySelector("#root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>