迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

React教程之子组件的Props的类型

发布时间: 2016-06-23 作者: 迹忆 浏览次数:

通常情况下,React的组件的子组件是一组,也就是说子组件是一个数组。看下面的例子

var GenericWrapper = React.createClass({
    componentDidMount: function() {
        console.log(Array.isArray(this.props.children)); // => true
    },

    render: function() {
        return <div />;
    }
});

ReactDOM.render(
    <GenericWrapper><span/><span/><span/></GenericWrapper>,
    document.getElementById('content')
);

组件GenericWrapper有三个子组件,所以上述例子运行结果会在控制台打印出true。

虽说其子组件是一个数组,然而如果其子组件只有一个组件的情况,并不是说数组中只有一个元素,而是说this.props.children不是一个数组。或者说只有其本身,没有子组件的情况也不是一个空数组,this.props.children本身就不是一个数组。

var GenericWrapper = React.createClass({
    componentDidMount: function() {
        console.log(Array.isArray(this.props.children)); // => false
    },

    render: function() {
        return <div />;
    }
});

ReactDOM.render(
    <GenericWrapper><span/></GenericWrapper>,
    document.getElementById('content')
);

也就是说,上面的结果是会在控制台输出false。

但是,这里有一点需要注意:我们这里说的是组件的子组件,而并不是子元素。我们可以通过this.props.children获得子组件,但是并不能获得子元素。

var GenericWrapper = React.createClass({
    componentDidMount: function() {
        console.log(Array.isArray(this.props.children)); // => false
    },

    render: function() {
        return <div><span/><span/></div>;
    }
});

ReactDOM.render(
    <GenericWrapper></GenericWrapper>,
    document.getElementById('content')
);

这里在控制台打印出来的就是false。因为在本例中span是div的子元素,对于组件GenericWrapper它并没有子组件。所以说this.props.children不是一个数组。

对于组件没有子组件的情况,this.props.children为undefined。

var GenericWrapper = React.createClass({
    componentDidMount: function() {
        console.log(this.props.children); // => undefined
    },

    render: function() {
        return <div><span/><span/></div>;
    }
});

ReactDOM.render(
    <GenericWrapper></GenericWrapper>,
    document.getElementById('content')
);

控制台打印出来的结果就是undefined。

本篇内容比较简单,希望对大家有所帮助。

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: