react中props的使用

使用方法

基本使用方法
1. root2.render(<MyComponent name='李四' age="18" gender="男" />);

批量传值方法

root.render(<MyComponent {...props} />);

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <style> .foo { color: red; } </style> </head> <body>

复制代码

 <script type="text/babel">
     const root = ReactDOM.createRoot(document.getElementById("root"));
     const root2 = ReactDOM.createRoot(document.getElementById("root2"));
     class MyComponent extends React.Component {
         state = {
             isHot: true
         }

         render() {
             const { name, age, gender } = this.props;
             return (
                 <ul>
                     <li>{name}</li>
                     <li>{age}</li>
                     <li>{gender}</li>
                 </ul>
             )
         }
         // 使用箭头函数来定义方法，确保 this 指向组件实例
         changeWeather = () => {
             console.log(this);
             this.setState({
                 isHot: !this.state.isHot
             });
         }
     }
     const props = {
         name: "张三",
         age: 20,
         gender: "男"
     }
     //传递属性
     root2.render(<MyComponent name='李四' age="18" gender="男" />);
     //批量传递属性
     root.render(<MyComponent {...props} />);



 </script>

</body> </html>

输出结果

对props进行限制

复制代码

<script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        const root2 = ReactDOM.createRoot(document.getElementById("root2"));
        class MyComponent extends React.Component {
            state = {
                isHot: true
            }

            render() {
                const { name, age, gender } = this.props;
                return (
                    <ul>
                        <li>{name}</li>
                        <li>{age}</li>
                        <li>{gender}</li>
                    </ul>
                )
            }
            // 使用箭头函数来定义方法，确保 this 指向组件实例
            changeWeather = () => {
                console.log(this);
                this.setState({
                    isHot: !this.state.isHot
                });
            }
        }
        //定义属性类型和默认属性
        MyComponent.propTypes = {
            name: PropTypes.string,
            age: PropTypes.number,
            gender: PropTypes.string,
               speak: PropTypes.func//限制 speak 必须是一个函数
        }
        MyComponent.defaultProps = {
            name: "张三",
            age: 20,
            gender: "男",
            speak: function () {
                console.log("hello");
            }
        }
        //传递属性
        const props = {
            name: "张三",
            age: 20,
            gender: "男"
        }
        //传递属性
        root2.render(<MyComponent name='李四' age={18} gender="男" />);
        //批量传递属性
        root.render(<MyComponent {...props} />);



    </script>

简写props

复制代码

 <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        const root2 = ReactDOM.createRoot(document.getElementById("root2"));
        class MyComponent extends React.Component {
            //定义属性类型和默认属性
            //将 PropTypes 作为静态属性添加到组件类中
            static propTypes = {
                name: PropTypes.string,
                age: PropTypes.number,
                gender: PropTypes.string
            }
            static defaultProps = {
                name: "张三",
                age: 20,
                gender: "男"
            }
            state = {
                isHot: true
            }

            render() {
                const { name, age, gender } = this.props;
                return (
                    <ul>
                        <li>{name}</li>
                        <li>{age}</li>
                        <li>{gender}</li>
                    </ul>
                )
            }
            // 使用箭头函数来定义方法，确保 this 指向组件实例
            changeWeather = () => {
                console.log(this);
                this.setState({
                    isHot: !this.state.isHot
                });
            }
        }

        //传递属性
        const props = {
            name: "张三",
            age: 20,
            gender: "男"
        }
        //传递属性
        root2.render(<MyComponent name='李四' age={18} gender="男" />);
        //批量传递属性
        root.render(<MyComponent {...props} />);



    </script>

类式组件中的构造器

是否写构造器取决于构造器是否接收props参数，是否传递给super，取决于你是否需要在构造器中使用

复制代码

             //定义构造函数
            //构造函数中调用super方法，传递props参数
            //构造器是否接收props参数，是否传递给super，取决于你是否需要在构造器中使用this.props
            constructor(props) {
                super(props);
                console.log("constructor", this.props);
            }

函数式组件使用props

复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>
    <style>
        .foo {
            color: red;
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        function MyComponent(props) {
            const { name, age, gender } = props;    //解构赋值  
            return (
                <ul>
                    <li>{name}</li>
                    <li>{age}</li>
                    <li>{gender}</li>
                </ul>
            );
        }
        MyComponent.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            gender: PropTypes.string
        };
    //defaultProps已经被废弃，建议使用函数默认参数代替
    
        MyComponent.defaultProps = {
            name: "张三",
            age: 20,
            gender: "男"
        }
        const props = { name: "张三", age: 18, gender: "男" };
        //批量传递属性
        root.render(<MyComponent {...props} />);



    </script>
</body>

</html>

总结

理解

每一个组件都有props属性
组件标签的属性都保存props中

作用

从组件外部向组件内部传递数据
注意：组件内部不要修改props数据