react组件

Posted 2021-06-23 天行子

实例

<div id="example"></div>
<script type="text/babel">
    function HelloMessage(props) {
        return <h1>Hello World!</h1>;
    }

    const element = <HelloMessage />;

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

实例

<div id="example"></div>
<script type="text/babel">
    function Name(props) {
        return <h1>网站名称：{props.name}</h1>;
    }
    function Url(props) {
        return <h1>网站地址：{props.url}</h1>;
    }
    function Nickname(props) {
        return <h1>网站小名：{props.nickname}</h1>;
    }
    function App(props) {
        console.log(props);
        return (
            <div>
                <Name name={props.name} />
                <Url url={props.url} />
                <Nickname nickname={props.nickname} />
            </div>
        );
    }

    ReactDOM.render(
        <App name="百度" url="www.baidu.com" nickname="huyongjian" />,
        document.getElementById(\'example\')
    );
</script>