React組件Props的類型實例分析

這篇文章主要講解了“React組件Props的類型實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“React組件Props的類型實例分析”吧！

通常情況下，React的組件的子組件是一組，也就是說子組件是一個數組?？聪旅娴睦?/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有三個子組件，所以上述例子運行結果會在控制臺打印出true。

雖說其子組件是一個數組，然而如果其子組件只有一個組件的情況，并不是說數組中只有一個元素，而是說this.props.children不是一個數組?；蛘哒f只有其本身，沒有子組件的情況也不是一個空數組，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。

感謝各位的閱讀，以上就是“React組件Props的類型實例分析”的內容了，經過本文的學習后，相信大家對React組件Props的類型實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！