父級到子級元件

實際上最簡單的情況，在 React 世界非常自然而且機會是 - 你已經在使用它了。

你可以將道具傳遞給子元件。在這個示例中，message 是我們傳遞給子元件的 prop，名稱訊息是任意選擇的，你可以將它命名為你想要的任何名稱。

import React from 'react';

class Parent extends React.Component {
    render() {
        const variable = 5;
        return (
            <div>
                <Child message="message for child" />
                <Child message={variable} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return <h1>{this.props.message}</h1>
    }
}

export default Parent;

這裡，<Parent /> 元件呈現兩個 <Child /> 元件，在第一個元件內傳遞 message for child，在第二個元件內傳遞 5。

總之，你有一個元件（父級），它呈現另一個（子）並傳遞給它一些道具。