我有
形式的代码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>
}
})
答案 0 :(得分:4)
我不认为问题,你所拥有的是与嵌套对象有关的道具。这是一个例子:
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'));
更有可能的是,您的问题与您如何设置子组件的键有关。但是,如果没有看到整个代码,很难说清楚。
这是creeateFragment
功能的链接,它可能会对您有所帮助。 https://facebook.github.io/react/docs/create-fragment.html
答案 1 :(得分:0)
如果您使用的是JSX,还可以通过构建如下对象来将嵌套对象作为道具传递:
<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>