查看内容

百家阁网站-详解React之父子组件传递和其它一些要点

react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度。下面对一些react日常开发中的注意事项进行罗列。

react主要思想是构建可复用组件来构建用户界面。在react里面一切皆组件。每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法,分别在哪个阶段执行。下面附上一张React的生命周期图:

组件第二阶段:组件运行时候的状态 ①:状态变化引发组件的更新和重新渲染到更新完成

②:父组件属性变化引发组件的更新(是常见的组件之间传递数据和同步状态的手段):比如父组件登录了,子组件也需变成登录状态

const names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( { names.map((name) => { return Hello, {name}! }) } , document.getElementById('example') );

子: var HelloMess**e = React.createClass({ render: function() { return Hello {this.props.name}; } }); --------------------------------------- 父: ReactDOM.render( , document.getElementById('example') );

就是相当于一个子组件类。通过this.props.name获取到了Muyy。

所有组件类都必须有自己的

组件类的第一个字母必须大写,否则会报错,比如

组件类只能包含一个顶层标签

其实很简单,概括起来就是:react中state改变了,组件才会update。父组件写好state和处理该state的函数,同时将函数名通过props属性值的形式传入子,子调用父的函数,同时引起state变化。

例子1.这里如下图,用户邮箱为父,绿色框为子。 父组件为用户输入的邮箱设好state,即“{email: ''}”,同时写好处理state的函数,即“handleEmail”,这两个名称随意起;再将函数以props的形式传到子组件,子组件只需在事件发生时,调用父组件传过来的函数即可。

//子组件 var Child = React.createClass({ render: function(){ return ( 请输入邮箱: ) } }); //父组件,此处通过event.target.value获取子组件的值 var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(event){ this.setState({email: event.target.value}); }, render: function(){ return ( 用户邮箱:{this.state.email} ) } }); React.render(

, document.getElementById('test') );

例子2.有时候往往需要对数据做处理,再传给父组件,比如过滤或者自动补全等等,下面的例子对用户输入的邮箱做简单验证,自动过滤非数字、字母和"@."以外的字符。

//子组件,handleVal函数处理用户输入的字符,再传给父组件的handelEmail函数 var Child = React.createClass({ handleVal: function() { var val = this.refs.emailDom.value; val = val.replace(/[^0-9|a-z|\@|\.]/ig,""); this.props.handleEmail(val); }, render: function(){ return ( 请输入邮箱: ) } }); //父组件,通过handleEmail接受到的参数,即子组件的值 var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(val){ this.setState({email: val}); }, render: function(){ return ( 用户邮箱:{this.state.email} ) } }); React.render(

, document.getElementById('test') );

例子3.如果还存在孙子组件的情况呢?如下图,黑框为父,绿框为子,红框为孙,要求子孙的数据都传给爷爷。原理一样的,只是父要将爷爷对孙子的处理函数直接传下去。

//孙子,将下拉选项的值传给爷爷 var Grandson = React.createClass({ render: function(){ return ( 性别: 男 女 ) } }); //子,将用户输入的姓名传给爹 //对于孙子的处理函数,父只需用props传下去即可 var Child = React.createClass({ render: function(){ return ( 姓名: ) } }); //父组件,准备了两个state,username和sex用来接收子孙传过来的值,对应两个函数handleVal和handleSelect var Parent = React.createClass({ getInitialState: function(){ return { username: '', sex: '' } }, handleVal: function(event){ this.setState({username: event.target.value}); }, handleSelect: function(event) { this.setState({sex: event.target.value}); }, render: function(){ return ( 用户姓名:{this.state.username} 用户性别:{this.state.sex} ) } }); React.render(

, document.getElementById('test') );

getDefaultProps && getInitialState

var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'Hello World' }; }, render: function() { return {this.props.title} ; } }); ReactDOM.render( , document.body );

getInitialState: function() { return {liked: false}; },

var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( ); } }); ReactDOM.render( , document.getElementById('example') );

的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个

属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定

父组件调用子组件的state、function,除了上面介绍的方法之外,也可以通过ref属性实现。推荐使用这种方式进行子组件向父组件的传递。举个简单的示范:

export default class 父组件a extends React.Component { constructor(props) { super(props) } render() { return ( <子组件b ref={r => this.bbbb =r} // bbbb自定义名字 /> ) } }

经过这样处理后后,现在父组件a中可以通过this.bbbb.state.xxx获取子组件的xxx状态,也可以通过this.bbbb.xxx获取子组件的xxx方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。