这篇文章给大家介绍props怎么在react中使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
组件的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 可以是下列原生构造函数中的一个：
StringNumberBooleanArrayObjectDateFunctionSymbol额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：
function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName}你可以使用：
Vue.component('blog-post', { props: { author: Person }})关于props怎么在react中使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
