React.js：将嵌套的props传递给React.createElement

Question

我有以下形式的代码

props = { user: {userattr1: 1, userattr2: 2}};
var element = React.createElement(MyReactClass, props);

即props是一个嵌套对象 。 当我尝试编译以上代码时，出现错误：

警告：对键对象的任何使用都应在作为子对象传递之前包装在React.addons.createFragment（object）中。

我一直在网上寻找，看来嵌套对象完全可以作为道具。 我该如何解决我的错误？

编辑： MyReactClass看起来像这样：

var MyReactClass = React.createClass({
  render: function () {
    <div>{this.props.user}</div>
  }
})

Answer 1

我认为问题不在于您与嵌套对象相关。 这是一个例子：

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'));

https://jsfiddle.net/urjmndzk

您的问题更有可能与您如何设置子组件的键有关。 但是，不看完整的代码就很难分辨。

这是creeateFragment函数的链接，可能会对您有所帮助。 https://facebook.github.io/react/docs/create-fragment.html

Answer 2

如果您使用的是JSX，则还可以通过构建如下对象来将嵌套对象作为prop传递：

<HelloWorldClass user={{name:'Kyle'}} />

堆栈代码段中的语法示例

 // 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>