React -- 数据流
在React中,数据是从父组件到子组件流动的,这条原则可以让我们只需要在父组件上操作,然后子组件就会自动更新并渲染。 这一节有两个很重要的概念:React组件的state和props。 state内置方法setState:当我们调用这个方法后,由于组件的状态改变,这时候,组件就会尝试重新渲染。 在React中,常常在事件处理方法中更新state,例如按钮绑定的方法等等。 一个栗子:(本栗采用ES6 class的语法方式构建组件) import React,{ Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
count: 0,};
}
handleClick(e) {
e.preventDefault();
this.setState({
count: this.state.count + 1,});
}
render() {
return (
<div>
<p>{this.state.count}</p>
<a href="#" onClick={this.handleClick}> </a>
</div>
);
}
}
props首先给出Tab组件的基本方法,本节我们将在这个控件的基础上学习: class Tabs extends Component {
constructor(props) {
super(props);
}
// ...
render() {
return <div className="ui-tabs"></div>;
}
};
下面进入正题: props是React用来让组件之间相互联系的机制,通俗的说,就好像是方法的参数。开发者利用props,可以在React组件之间传递数据。 组件的props一定来自于默认属性或从父组件传递而来,如果我们试图在代码中修改props的原始值,React将会报错。 栗子: <Tabs classPrefix={'tabs'} defaultActiveIndex={0}>
<TabPane key={0} tab={'Tab 1'}> Tab1content </TabPane>
<TabPane key={1} tab={'Tab 2'}> Tab2content </TabPane>
<TabPane key={2} tab={'Tab 3'}> Tab2content </TabPane>
</Tabs>
在组件Tabs中,classPrefix和defaultActiveIndex都是组件的props。 1、子组件prop 在React中有一个重要且内置的prop:children,它代表组件的子组件的集合。例如,上面这个Tabs的子组件就是: <TabPane key={0} tab={'Tab 1'}> Tab1content </TabPane>
<TabPane key={1} tab={'Tab 2'}> Tab2content </TabPane>
<TabPane key={2} tab={'Tab 3'}> Tab2content </TabPane>
那么,父组件Tabs渲染子组件TabPane的方法就是: getTabPanes() {
const { classPrefix,activeIndex,panels,isActive } = this.props;
return React.Children.map(panels,(child) => { if (!child) { return; } const order = parseInt(child.props.order,10); const isActive = activeIndex === order; return React.cloneElement(child,{ classPrefix,isActive,children: child.props.children,key: `tabpane-${order}`,}); }); }
这段代码完成的功能是渲染子组件。通过方法map遍历子组件,同时将order,children,key利用cloneElement方法克隆到一个新创建的TabPane组件中,然后返回这个新的组件集合。这样,在我们需要的时候,调用方法getTabPanes即可完成对组件的渲染。 2、其他组件prop 在前面的栗子中,组件prop我们传入的是一个固定值: <TabPane key={0} tab={'Tab 1'}> Tab1 </TabPane>
但是,其实prop的强大之处在于,我们可以向其中传入动态值,甚至节点(component props)。 栗子: <Tabs classPrefix={'tabs'} defaultActiveIndex={0} className="tabs-bar">
<TabPane order="0" tab={<span><i className="fa fa-home"></i> Home</span>}>
</TabPane>
<TabPane order="1" tab={<span><i className="fa fa-book"></i> Library</span>}>
</TabPane>
<TabPane order="2" tab={<span><i className="fa fa-pencil"></i> Applications</span>}>
</TabPane>
</Tabs>
这样,配合上相关的渲染代码,在渲染后,我们就可以在每个TabPane中,插入新的元素。 渲染的关键在于遍历所有tabpane组件的tab prop,进行必需的操作后,将它们返回。 3、用function prop与父组件通信。 state的通信集中在组件内部,而对于prop,它的通信则是父组件向子组件传播。 4、propTypes propTypes用于规范props的类型和必需的状态:如果组件定义了propTypes,那么在开发环境下,就会对prop的值新型类型检查,如果传入的prop与要求的类型不匹配,React将会在控制台中报出warning。 static propTypes = {
classPrefix: React.PropTypes.string,className: React.PropTypes.string,defaultActiveIndex: React.PropTypes.number,activeIndex: React.PropTypes.number.isRequired,// 必需
onChange: React.PropTypes.func,// func 不是 function,另外,对于布尔类型是bool 而不是 boolean
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.node),React.PropTypes.node,]),};
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |