Question

以下是代码：

import React from 'react';
import Tabs from './TabParent.jsx';

var Topbar = React.createClass ({
    propTypes : {
        tbOptionsMenu : React.PropTypes.bool.isRequired,
        lftSideEle : React.PropTypes.bool.isRequired,
        typeOfTransaction : React.PropTypes.number,
        tabAttr : React.PropTypes.array.isRequired
    },

    getDefaultProps : function () {
        return ({
            tabAttr : [
                {
                    tabClassName : 'tabPreview tab',
                    tabName : 'Preview'
                },
                {
                    tabClassName : 'tabBody tab',
                    tabName : 'Body'
                },
                {
                    tabClassName : 'tabSleeve tab',
                    tabName : 'Sleeve'
                }
            ]
        });
    },

    render : function () {
        var tbOptionsMenu = (
            <div id="tbOptionsMenu" className="tbIcon" data-action="menuItem-main" data-tooltip="MENU : Why not take a peek, for you may find what you seek...">i</div>
        );

        var lftSideEle = (
            <div className="tbDetails tbBrandParent">
                <div className="mainHeading tbBrandName" data-tooltip="Your Brand Name" data-action="labelmenu-open">Brand Name</div>
                <div className="mainHeading tbDesignName" data-tooltip="Your Design Name">a new design</div>
            </div>
        );

        return (
            <div className='topBar'>
                {this.props.tbOptionsMenu && tbOptionsMenu}
                {this.props.lftSideEle && lftSideEle}
                <Tabs {this.props.tabAttr}> </Tabs>
            </div>
        );
    }
});

export default Topbar;

Webpack报告组件'Tabs'的呈现错误。错误是无益的：'模块构建失败：语法错误：......线路上的意外令牌......'

省略该行，其余代码工作正常。

Answer 1

您应该添加属性名称

<Tabs tabAttr={this.props.tabAttr} />

或者如果你想将所有道具从父母传给孩子，你可以像这样使用spread attributes

<Tabs {...this.props} />

Answer 2

尝试

<Tabs tabAttr={this.props.tabAttr} />

而不是

<Tabs {this.props.tabAttr}> </Tabs>

您可以在此处详细了解此信息 https://facebook.github.io/react/docs/jsx-in-depth.html

React子组件呈现错误

2 个答案: