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;

那让我回头

未捕获错误：对象作为React子对象无效（找到：具有键{_bu}的对象）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查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});

这意味着您将使用密钥object而不是_b返回JSX。

检查此代码段：

let a = 5;

let b = { a };

console.log('b = ', b);

对象无效作为React子对象（找到：带键的对象）

1 个答案: