React父子传参

2021-11-18 15:30:02 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<h1 style="color: red;">React 父子传参</h1>
<div id="root"></div>
<script type="text/babel">
    // 类方式特点：必须继承父组件
    class Hello extends React.Component{
        // 构造方法：new 类时自动触发
        // React.Component父类继承 不需要写
        /*constructor(props) {
            super();
            // 带有 this. 前缀，说么props 是成员属性：成员属性特点是可以跨方法使用
            this.props = props;
        }*/
        render() {
            return <h1>Hoell {this.props.name}</h1>
        }
    }
    // bable会自动转译为 ReactDOM.render(new Hello({name: "罗根"}).render(), root)
    ReactDOM.render(<Hello name="罗根" />,root)

    let more = <div>
        <Hello name="小米" />
        <Hello name="小红" />
        <Hello name="小张" />
        <Hello name="小罗" />
    </div>
    ReactDOM.render(more, root)
</script>
</body>
</html>

标签：传参,父子,render,React,props,root,ReactDOM
来源： https://blog.csdn.net/qq_58946831/article/details/121401928