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} />);