React Component --React

一、Use functions to define components

<script type="text/babel">
    function HelloWord() {
        return <h1>Hello World!</h1>;
    }
</script>

二、Use ES6 class to define components

<script type="text/babel">
    class HelloWord extends React.Component {
        render() {
            return <h1>Hello World!</h1>;
        }
    }
</script>

三、Transfer parameters to functions

<script type="text/babel">
    function HelloWorld(props) {
        return <h1>Hello {props.name}!</h1>;
    }
    const element = <HelloWorld name="Word"/>;

    ReactDOM.render(
        element,
        document.getElementById('example')
    );
</script>

四、Composite components

<script type="text/babel">
    function WebsiteName(props) {
        return <div>网站名称：{props.name}</div>;
    }

    function WebsiteUrl(props) {
        return <div>网站地址：{props.url}</div>;
    }

    function Application() {
        return (
            <div>
                <WebsiteName name="蓝色旗帜"/>
                <WebsiteUrl url="http://www.blueflags.cn"/>
            </div>
        );
    }

    ReactDOM.render(
        <Application/>,
        document.getElementById('example')
    );
</script>

参考：https://www.runoob.com/react/react-components.html

原文地址：https://www.cnblogs.com/qikeyishu/p/10961329.html