);
    }
});

其实，这里…this.props和…other功能差不多。但是，其不同的地方在于，…other是包含除了明确使用的属性以外剩下的那些属性。而…this.props包含所有的属性，不论你是否是明确使用的。也就是说，在上面的额例子中，checked属性也会被传到组件里面去。

如果一个属相被使用了，但是还想接着往下传那应该怎么办。我们通过上面的讲解知道，如果使用…other方式的话，属性被使用了就无法再往下传了。所以说如果想要往下继续传递的话，可以使用checked={checked}这种方式再次重传。

看下面的例子

var Checkbox  = React.createClass({
    handleChange:function(){
        console.log('迹忆博客');
    },
    render: function() {
        var { checked, title, ...other } = this.props;
        var Cbox = checked ? 'FancyChecked' : 'FancyUnchecked';
        var boxTitle = checked ? 'Y ' + title : 'N ' + title;
        return (
           
                                    checked={checked}
                    className={Cbox}
                    type="checkbox"
                    onChange={this.handleChange}
                 />
                {boxTitle}
           
        );
    }
});
ReactDOM.render(
    ,
    document.getElementById('content')
);

这里我们要注意属性的顺序。我们把input中{…other}放在JSX Props的前面是保证JSX的Props不被覆盖。在上面的例子中我们就可以保证input的类型就是checkbox。

比方说吧，如果我们input中的Props的顺序是下面这样的

    type="checkbox"
    {...other}
    checked={checked}
    className={Cbox}
    onChange={this.handleChange}
    />

而我们又在使用render渲染的时候指定了input的type属性为text

那最后得到的就不是checkbox了，而是一个输入框。因为input的type=”checkbox”属性被…other中的type属性覆盖掉了。

读到这里，这篇“React中怎么传递Props”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

本文标题：React中怎么传递Props
本文URL：http://kswjz.com/article/iicchj.html