- A+
所属分类：Web前端
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
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} />); 
