React 组件属性
|
这一章节讨论组件属性（亦称为props）。 组件属性是什么？组件属性（props）的功能和 HTML attribute 类似。换句话说， props 为组件提供配置值。例如，下面代码中的 Badge 组件，当它被实例化时，它期望获取一个名为 name 的属性。 点击在JSFiddle中查看 当 <BadgeList> 组件里的 render 函数调用 <Badge> 组件时，name 属性会被添加到 <Badge> 组件中，类似于 HTML 属性被添加到 HTML 元素中 (比如， <Badge name="Bill" />). 然后 name 属性就可以被 Badge 组件使用了（比如，this.props.name）. 这就像 <input> 元素用一个 value 属性就可以展示这个 value 了一样. var Badge = React.createClass({
displayName: "Badge",render: function render() {
return React.createElement(
"div",null,//no props defined,so null
this.props.name //use passed this.prop.name as text node
);
}
});
var BadgeList = React.createClass({
displayName: "BadgeList",React.createElement(Badge,{ name: "Bill" }),{ name: "Tom" })
);
}
});
ReactDOM.render(React.createElement(BadgeList,null),document.getElementById('app'));
这类似于 props 可以在 React 节点中被直接设置（参见 4.4 和 5.7）。当 createElement() 函数的参数为一个组件定义（比如，Badge），而不是一个节点时，组件属性在该组件自身中也是可用的（比如，this.props.name）。 点击在JSFiddle中查看 基本上每个 React 组件实例都有一个独特的实例属性，该属性称为 props，一开始它是个空的 JavaScript 对象。这个空对象可以被父组件用 JavaScript 的 值/ 参数 填充。这些值被该组件使用或传递给子组件。 在 ES5 环境／引擎中，你不能改变 this.props ，因为它被冻结了（比如,Object.isFrozen(this.props) === true; ）； 发送组件属性给组件添加属性值时，必须是在组件被使用的时候，而不是在组件被定义的时候。比如，下面的代码中， Badge 组件首先被定义，然后再给它添加属性。当该组件被使用的时候 name=“Bill" 才被添加上去（比如，<Badge name="Bill" /> 被渲染的时候）. var Badge = React.createClass({
render: function() {
return <div>{this.props.name}</div>;
}
});
ReactDOM.render(<Badge name="Bill" />,document.getElementById('app'));
组件在被调用的时候，不管在哪调用，都可以给它传递属性。 var Badge = React.createClass({
render: function() {
return <div>{this.props.name}</div>;
}
});
var BadgeList = React.createClass({
render: function() {
return (<div>
<Badge name="Bill" />
<Badge name="Tom" />
</div>);
}
});
ReactDOM.render(<BadgeList />,document.getElementById('app'));
本节笔记 组件属性是不可变的，并且组件不能够内部修改从它父级传递过来的属性。如果你一定要改变组件属性，那么该组件就要被重新渲染；不要使用 this.props.[PROP] = [NEW PROP] 这种方式来更改 props. 获取组件属性正如 6.4 章节讨论的那样，一个组件实例可以通过 this 关键字获取任何属性值。比如，在下面的代码中，Badge 通过 this 关键字从 render 配置项中获取 props(比如，this.props.name) . var Badge = React.createClass({
render: function() {
return <div>{this.props.name}</div>;
}
});
ReactDOM.render(<Badge name="Bill" />,document.getElementById('app'));
如果你看过转化后的 Javascript （比如，JSX to JS），就没什么难掌握的。 var Badge = React.createClass({
displayName: "Badge",this.props.name
);
}
});
ReactDOM.render(React.createElement(Badge,document.getElementById('app'));
在上面代码示例中，{ name: "Bill" } 对象连同 Badge 组件一起做为 createElement() 函数的参数。该组件可以从 props 那里了解到它的实例属性值被设置为 { name: "Bill" }. this.props 是只读的，不要通过 this.props.PROP = ‘foo' 去设置 props。 设置默认组件属性组件在被定义的时候，可以通过配置 getDefaultProps 来设置默认属性。 如下示例： 点击在JSFiddle中查看 如果这个组件没有其他的 prop 传递进来的话，this.props 就是默认属性。你可以用上面的代码验证下，即不带 name 属性的 Badge 组件实例使用的是默认属性 'John Doe’。 组件被创建的时候，getDefaultProps 调用一次并被缓存。 组件属性不仅仅是字符串确保要理解一个组件属性可以是任何有效的 JavaScript 值。 点击在JSFiddle中查看 注意当 MyComponent 被创建的时候， propArray 和 propObject 被新值覆盖了。 验证组件属性定义组件的时候，propTypes 的配置项可以用来验证传递给 props 的属性值是否符合要求。如下面代码示例所示： 点击在JSFiddle中查看 如果我没有按照 propTypes 中指定的属性类型去发送属性，它就会导致错误。比如，上面的代码会在控制台中显示如下的错误： Warning: Failed propType: Invalid prop `propArray` of type `object` supplied to `MyComponent`,expected `array`
Warning: Failed propType: Required prop `propFunc` was not specified in `MyComponent`.
Uncaught TypeError: this.props.propFunc is not a function
然而，下面正确的那个组件渲染永远都不会导致错误： ReactDOM.render(<MyComponent propArray={[1,2]} propFunc={function(){return 3;}} />,document.getElementById('app'));
React 也提供了一些自带的验证处理（比如，React.PropTypes[VALIDATOR]）（也可以创建自定义验证）： 基本类型验证这些验证检查 prop 是否是一个特殊的 JS 原生值。这些默认都是可选的。也就是说，只有设置了 prop，验证才会进行。 链接原文链接 在GitBook上的链接 欢迎指正修改。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |