React Component --React

Posted 2021-12-15 qikeyishu

一、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