react组件的类型（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} />);