React組件Props的類型實(shí)例分析

這篇文章主要講解了“React組件Props的類型實(shí)例分析”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“React組件Props的類型實(shí)例分析”吧！

通常情況下，React的組件的子組件是一組，也就是說(shuō)子組件是一個(gè)數(shù)組?？聪旅娴睦?/p>

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有三個(gè)子組件，所以上述例子運(yùn)行結(jié)果會(huì)在控制臺(tái)打印出true。

雖說(shuō)其子組件是一個(gè)數(shù)組，然而如果其子組件只有一個(gè)組件的情況，并不是說(shuō)數(shù)組中只有一個(gè)元素，而是說(shuō)this.props.children不是一個(gè)數(shù)組?；蛘哒f(shuō)只有其本身，沒有子組件的情況也不是一個(gè)空數(shù)組，this.props.children本身就不是一個(gè)數(shù)組。

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')
);

也就是說(shuō)，上面的結(jié)果是會(huì)在控制臺(tái)輸出false。

但是，這里有一點(diǎn)需要注意：我們這里說(shuō)的是組件的子組件，而并不是子元素。我們可以通過(guò)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')
);

這里在控制臺(tái)打印出來(lái)的就是false。因?yàn)樵诒纠衧pan是div的子元素，對(duì)于組件GenericWrapper它并沒有子組件。所以說(shuō)this.props.children不是一個(gè)數(shù)組。

對(duì)于組件沒有子組件的情況，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')
);

控制臺(tái)打印出來(lái)的結(jié)果就是undefined。

感謝各位的閱讀，以上就是“React組件Props的類型實(shí)例分析”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)React組件Props的類型實(shí)例分析這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！