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} />);
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)