javascript - 对象作为 React 子对象无效(找到 : object with keys)

Question

我这样创建一个组件:

let bList = bObj.map((obj, index) => {
        let { 
            icon, htmlType, onClick } = obj;

        let _b = <Button 
                    htmlType = { htmlType } 
                    icon = { icon }
                    onClick = { () => {this._onClick()} } />

        if(someVar) {
            return (
                <AnotherComp style = { someVar } 
                    key = { index } >
                    { _b }
                </AnotherComp>
            );

        } else {
            return (
                { _b }
            );
        }
    });

bList = 
    <div style = { wrap }>
        <myComp style = { grp }> 
            { buttonsList } 
        </myComp>
    </div>

return bList;

这让我回来了

Uncaught Error: Objects are not valid as a React child (found: object with keys {_bu}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of MyComp.

但是，当我这样写的时候:

let bList = bObj.map((obj, index) => {
        let { 
            icon, htmlType, onClick } = obj;

        if(someVar) {
            return (
                <AnotherComp style = { someVar } 
                    key = { index } >
                    <Button 
                        htmlType = { htmlType } 
                        icon = { icon }
                        onClick = { () => {this._onClick()} } />
                </AnotherComp>
            );

        } else {
            return (
                <Button 
                    htmlType = { htmlType } 
                    icon = { icon }
                    onClick = { () => {this._onClick()} } />
            );
        }
    });

bList = 
    <div style = { wrap }>
        <MyComp style = { grp }> 
            { buttonsList } 
        </MyComp>
    </div>

return bList;

它有效。 <Button ../>和省钱的区别在哪里在变量中并直接将其写入那里？!

Answer 1

不同之处在于您正在使用额外的 {}，删除它会起作用:

return  _b;

return ({ _b }) 的含义是:

return ({'_b' : _b});

这意味着您将返回一个带有键 _b 的 对象，而不是 JSX。

检查这个片段:

let a = 5;

let b = { a };

console.log('b = ', b);