react中props 的使用及进行限制的方法

组件的props（ props是一个对象 ）

作用：接收传递给组件的数据
特点：

• 可以给组件传递任意类型的数据
• props是只读的对象，只能读取属性的值，无法修改对象
• 注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到

props props 的使用

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <script type='text/babel'>
  // 创建组件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

对props进行限制

一定要引入 prop-types.js 否则会报错

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <!-- 引入prop-types, 用于对组件标签属性进行限制 引入后全局就多了一个对象 PropTypes -->
  <script src="../js/prop-types.js"></script>

  <script type='text/babel'>
  // 创建组件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }
  // 限制规则
  Person.propTypes = {
    // 限制name 内容为字符串  isRequired 表示该内容为必须的不能省略
    name:PropTypes.string.isRequired,
    // 限制sex为字符串
    sex: PropTypes.string,
    // 限制age为数值
    age: PropTypes.number,
    // 限制speak为函数
    speak: PropTypes.func
  }
  Person.defaultProps = {
    sex:'男',// sex 默认值 为男
    age:18,
    speak: function() {
        return [1];
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

Vue 对props进行限定

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

类型检查
type 可以是下列原生构造函数中的一个：

String
Number
Boolean
Array
Object
Date
Function
Symbol

额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

你可以使用：

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

来验证 author prop 的值是否是通过 new Person 创建的。

到此这篇关于react 中的 props 的使用以及进行限制的文章就介绍到这了,更多相关react props进行限制内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！