使用与基本组件反应 - 最佳实践

时间:2014-07-31 11:16:05

标签: reactjs

我正在考虑为按钮创建一个像这样的反应组件:

var Button = React.createClass({
    getDefaultProps: function() {
        return {
            classString: '',
            disabled:'',
            text:'',
            link:'',
            onPropagateClick: function(){}
        };
    },
    handleClick: function () {
        this.props.onPropagateClick(this.props.link);
    },
    render: function () {
        return (
            <button className={this.props.classString} onClick={this.handleClick} disabled={this.props.disabled} >
                {(React.Children.count(this.props.children) === 0) ? this.props.text : this.props.children}
            </button>
        );
    }
}); 

并创建一个span组件:

var Span = React.createClass({
    getDefaultProps: function() {
        return {
            classString: '',
            text:''
        };
    },
    render: function () {
        console.log(this.props);
        return (
                <span className={this.props.classString}>
                    {this.props.text}
                </span>
            );
    }
});

当需要将Span作为Button的子项传递时

有谁知道这会对我的表现有何影响? 拥有这么多多层组件是一个好习惯吗?

感谢您的想法

1 个答案:

答案 0 :(得分:0)

它会稍微影响性能,但不要让它阻止你做这件事。它只是运行一点点JavaScript,而且JavaScript很快。

构成和构建抽象的大部分React的好处。只要他们能让您的其他组件更易于理解或更改,就可以编写帮助程序组件。