您现在的位置:首页 >> 前端 >> 内容

react中的props使用分析

时间:2018/5/24 14:32:14 点击:

  核心提示:在开发react的时候,是分为组件来进行开发的,正是有了组件化模式,给开发带来了许多的方便。在使用react组件的时候,因为都是单组件,因此,在子组件需要父组件的方法的时候,我们就要想办法来获取了。r...

在开发react的时候,是分为组件来进行开发的,正是有了组件化模式,给开发带来了许多的方便。

在使用react组件的时候,因为都是单组件,因此,在子组件需要父组件的方法的时候,我们就要想办法来获取了。react中是提供的单向绑定,而并不是像vue是可以进行双向绑定的。当然拉,react也可以做当逆向传输,这个我将在下一篇文章中介绍。

言归正传,react中,使用单向传输就必须使用props了。在react中的父子组件关系,我们可以将他想象成一个瀑布,props永远是向下流的,即props永远是传向他的子组件。举个栗子~~:

class demoOne extends React.Component{  
   fun(){  
    console.log('father');  
   }  
     
   render(){  
     return (  
      <p>  
         <Children funOne={this.fun} />  
      <p>  
     )  
   }  
  
}  

在上面的codeBlock中,我定义了一个fun函数,用于输出一个father字符串,而Children则是我们的子组件,funOne就是我们可以在子组件中调用父组件中fun函数的别名。

接着,我们就来看看子组件是如何做的把~~~

class Children extends React.Component{  
    render(){  
      return (  
         <p>  
            <button onClick={this.props.funOne}>11111</button>  
         </p>  
       )  
    }  
}  

这时候,我们点击内容就会输出父组件的内容拉

react中的props使用分析

Tags:RE EA AC CT 
作者:网络 来源:qq_3652945