主页 分类 关于

React Props

React笔记

state 和 props 主要的区别在于 props 是不可变的, 而 state 可以根据与用户交互来改变 这就是为什么有些容器组件需要定义 state 来更新和修改数据, 而子组件只能通过 props 来传递数据

最基本的使用 Props

<body>
<div id="example"></div>
<script type="text/babel">
function MyNameIsStitch(props) {
return <h1>我叫 {props.name}!</h1>;
}

const element = <MyNameIsStitch name="史迪奇"/>;

ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>

默认 Props

解析: 通过组件类的 defaultProps 属性为 props 设置默认值

<body>
<div id="example"></div>
<script type="text/babel">
class MyNameIsStitch extends React.Component {
render() {
return (
<h1>我叫{this.props.name}</h1>
);
}
}

MyNameIsStitch.defaultProps = {
name: '史迪奇'
};

const element = <MyNameIsStitch/>;

ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>

State 和 Props

解析: 父组件中设置 state 并通过在子组件上使用 props 将其传递到子组件上

<body>
<div id="example"></div>
<script type="text/babel">

class WebSite extends React.Component {
constructor() {
super();

this.state = {
name: "我叫史迪奇",
site: "https://sdq3.gitee.io"
}
}
render() {
return (
<div>
<Name name={this.state.name} />
<Site site={this.state.site} />
</div>
);
}
}



class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
}

class Site extends React.Component {
render() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}

ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>

Props 验证

<body>
<div id="example"></div>
<script type="text/babel">
var title = "史迪奇";

class MyNameIsStitch extends React.Component {
render() {
return (
<h1>我叫{this.props.title}</h1>
);
}
}

MyNameIsStitch.propTypes = {
title: PropTypes.string
};
ReactDOM.render(
<MyNameIsStitch title={title} />,
document.getElementById('example')
);
</script>
</body>

更多验证器

MyComponent.propTypes = {
{/* 可以声明 prop 为指定的 JS 基本数据类型, 默认情况, 这些数据是可选的 */}
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,

可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,

{/* React 元素 */}
optionalElement: React.PropTypes.element,

{/* 用 JS 的 instanceof 操作符声明 prop 为类的实例 */}
optionalMessage: React.PropTypes.instanceOf(Message),

{/* 用 enum 来限制 prop 只接受指定的值 */}
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

{/* 可以是多个对象类型中的一个 */}
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),

{/* 指定类型组成的数组 */}
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

{/* 指定类型的属性构成的对象 */}
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

{/* 特定 shape 参数的对象 */}
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),

{/* 任意类型加上 `isRequired` 来使 prop 不可空 */}
requiredFunc: React.PropTypes.func.isRequired,

{/* 不可空的任意类型 */}
requiredAny: React.PropTypes.any.isRequired,

{/* 自定义验证器如果验证失败需要返回一个 Error 对象不要直接使用 `console.warn` 或抛异常, 因为这样 `oneOfType` 会失效 */}
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
}
}









作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-Props.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议