react组件实例属性props

props

props简单使用

 class Person extends React.Component {

            render() {

                return (

                    <ul>

                        <li>姓名:{this.props.name}</li>

                        <li>年龄:{this.props.age}</li>

                        <li>性别:{this.props.sex}</li>

                    </ul>

                )

            }

        }

        const root = ReactDOM.createRoot(document.getElementById('test'));

        // 这里props属性要写成key:"value"形式,但是会默认将value视为字符串,若想传递js类型的字面量,则要加{}

        root.render(<Person name="kl" age={19} sex="男" />); 

props批量操作

 class Person extends React.Component {

            render() {

                return (

                    <ul>

                        <li>姓名:{this.props.name}</li>

                        <li>年龄:{this.props.age}</li>

                        <li>性别:{this.props.sex}</li>

                    </ul>

                )

            }

        }

        const root = ReactDOM.createRoot(document.getElementById('test'));

        const p = { name: "lml", sex: "nan", age: 18 }

        root.render(<Person {...p} />); 

props属性类型限制

需要导入prop-type

https://unpkg.com/prop-types@15.6/prop-types.js

 class Person extends React.Component {

            render() {

                return (

                    <ul>

                        <li>姓名:{this.props.name}</li>

                        <li>年龄:{this.props.age + 1}</li>

                        <li>性别:{this.props.sex}</li>

                    </ul>

                )

            }

        }

        // 对props限制

        Person.propTypes = {

            name: PropTypes.string.isRequired,

            sex: PropTypes.string,

            age: PropTypes.number,

            speak: PropTypes.func, // 限制为函数

        }

        // props默认值

        Person.defaultProps = {

            sex: '不男不女',

            age: 18,

        }

        function speak() {

            console.log('说话了');

        }

        const root = ReactDOM.createRoot(document.getElementById('test'));

        // 这里props属性要写成key:"value"形式,但是会默认将value视为字符串,若想传递js类型的字面量,则要加{}

        root.render(<Person name="lml" age={19} speak={speak} />); 

props属性限制的简写

 class Person extends React.Component {

            // 对props限制

            static propTypes = {

                name: PropTypes.string.isRequired,

                sex: PropTypes.string,

                age: PropTypes.number,

                speak: PropTypes.func, // 限制为函数

            }

            // props默认值

            static defaultProps = {

                sex: '不男不女',

                age: 18,

            }



            render() {

                return (

                    <ul>

                        <li>姓名:{this.props.name}</li>

                        <li>年龄:{this.props.age + 1}</li>

                        <li>性别:{this.props.sex}</li>

                    </ul>

                )

            }

        }



        const root = ReactDOM.createRoot(document.getElementById('test'));



        root.render(<Person name="lml" age={19} />); 

函数组件使用props

 function People(props) {

            return (

                <ul>

                    <li>name:{props.name}</li>

                    <li>age:{props.age}</li>

                </ul>

            )

        }

        const root = ReactDOM.createRoot(document.getElementById('test'));



        root.render(<People name="lml" age={19} />);