标签：name render age sex React props 组件 三大

props和state的区别

porps：父组件向子组件传递的参数，用于组件之间的通信，值不可变
state：组件内部的状态，值可变

1.props的用法

class Person extends React.Component {
  render() {
    const { name, age, sex } = this.props
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age}</li>
      </ul>
    )
  }
}
ReactDOM.render(<Person age={18} sex="男" name="张三" />, document.getElementById('test1'))

// 组件的属性支持解构赋值
const data = { name: '小二', sex: '女', age: 15}
ReactDOM.render(<Person {...data} />, document.getElementById('test2'))

2.使用prop-types限制数据的类型的必要性

1. 引入prop-types库<script type="text/javascript" src="../js/prop-types.js"></script>
2. static propTypes是固定写法，react会识别到

class Person extends React.Component {
/* 
  2.写在类里面必须使用static声明,因为propTypes和defaultProps是挂在类自身的,而不是实例对象上.
*/
static propTypes = {
  name: PropTypes.string.isRequired, // 必传
  age: PropTypes.number, // 不传不会报错，但是传了非数字的值会报错
  sex: PropTypes.string
}

render() {
  const { name, age, sex } = this.props
  return (
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{sex}</li>
      <li>年龄：{age}</li>
    </ul>
  )
}
}

ReactDOM.render(<Person sex="男" name="张三" />, document.getElementById('test'))

3.设置props的默认值

1. 同样是使用prop-types库

class Person extends React.Component {
// 指定默认标签属性值
static defaultProps = {
  sex: '男',
  age: 3
}

render() {
  const { name, age, sex } = this.props
  return (
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{sex}</li>
      <li>年龄：{age}</li>
    </ul>
  )
}
}

ReactDOM.render(<Person sex="男" name="张三" />, document.getElementById('test'))

4.函数式组件使用props

function Person(props) {
  const {name, age, sex} = props
  return (
    <ul>
      <li><mark>姓名：</mark> {name}</li>
      <li>年龄： {age}</li>
      <li>性别： {sex}</li>
    </ul>
  )
}

/* 
  函数定义的组件的props限制和默认值设置,只能写在函数外面
*/
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
  name: PropTypes.string.isRequired, // 必传
  age: PropTypes.number, // 不传不会报错，但是传了非数字的值会报错
  sex: PropTypes.string
}
// 指定默认标签属性值
Person.defaultProps = {
  sex: '男',
  age: 3
}

ReactDOM.render(<Person name="张三" />, document.getElementById('test'))

标签：name,render,age,sex,React,props,组件,三大
来源： https://blog.csdn.net/qq_42345108/article/details/123188952

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。