React中怎么传递Props

本文小编为大家详细介绍“React中怎么传递Props”，内容详细，步骤清晰，细节处理妥当，希望这篇“React中怎么传递Props”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

在React中，一个非常常用的模式就是将组件抽象封装起来。这些组件将对外公开一些属性（Props）来完成一些简单的功能，然而其内部细节可能是比较复杂的。一般情况下，Props是不变的。其使用方式如下：

{this.props.key}

下面我们先用一段代码来看一下Props如何使用

var CommentBox = React.createClass({
        render:function(){
            return (
                <div className=&rdquo;CommentBox&rdquo;>
                    Hello,world! I am a {this.props.name}.
                </div>
            );
        }
    }
);
ReactDOM.render(
    <CommentBox name="Props" />,
    document.getElementById('content')
);

看到了吗，其实Props使用就是这么简单。从上面的例子中我们可以知道，其实Props可以看做是在组件之间进行通信的一种方式。当然，对于组件之间的通信以后再向大家介绍。这里我们只介绍传递Props&mdash;&mdash;Transferring Props。

好，接着我们继续看下面的代码

var Checkbox = React.createClass({
    render: function() {
        var  Cbox = this.props.checked ? 'Checked' : 'Unchecked';
        return (
            <div className={Cbox} >
                {this.props.children}
            </div>
        );
    }
});
ReactDOM.render(
    <Checkbox checked={true}>
        Hello world!
    </Checkbox >,
    document.getElementById('content')
);

这段代码没有问题。但是，如果我想在div标签上面加上属性title、name、onClick等，是不是我要每一条都要写到组件里

<div className={fancyClass} onClick={this.props.onClick} name={this.props.name} title={this.props.title}>
    {this.props.children}
</div>

这样做显然是很啰嗦的，也是不安全的。这时我们可以通过JSX的特性 &hellip; 来解决这一问题。它的功能是将未知属性提取出来。

其用法就是，列出当前要使用的属性，后面再跟上 &hellip;other （注意：&hellip;后面跟的字符串不是固定的other，也可以是其它的，例如：onmpw）。

var {checked , ...other} = this.props;

这样就能确保除了那些明确使用的属性，其他的所有props都能传下去了。此时的&hellip;other中保存的是除了checked属性以外的所有属性。对于上面的例子我们可以改写成如下形式

var Checkbox = React.createClass({
    render: function() {
         var {checked , ...other} = this.props;
        var  Cbox = checked ? 'Checked' : 'Unchecked';
        return (
            <div className={Cbox} {...other} />
        );
    }
});
ReactDOM.render(
    <Checkbox checked={true} title="迹忆博客" name="onmpw">
        Hello world!
    </Checkbox >,
    document.getElementById('content')
);

在这个例子中，&hellip;other 中的属性为title、name和children，没有checked。

var {checked,title , ...other} = this.props;

这样，在 ...other 中的属性为name和children，就也不包含title了。

下面我们介绍一个和&hellip;other 类似的知识点，就是 &hellip;this.props。看下面的例子：

var Checkbox = React.createClass({
    render: function() {
        var  Cbox = this.props.checked ? 'Checked' : 'Unchecked';
        return (
            <div className={Cbox} {...this.props} />
        );
    }
});

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

如果一个属相被使用了，但是还想接着往下传那应该怎么办。我们通过上面的讲解知道，如果使用&hellip;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 (
            <label>
                <input {...other}
                    checked={checked}
                    className={Cbox}
                    type="checkbox"
                    onChange={this.handleChange}
                 />
                {boxTitle}
            </label>
        );
    }
});
ReactDOM.render(
    <Checkbox  checked={true} name="onmpw" title="迹忆博客" />,
    document.getElementById('content')
);

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

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

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

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

<Checkbox type="text" checked={true} name="onmpw" title="迹忆博客" />

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

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