react中的props

最新推荐文章于 2025-03-31 11:49:20 发布

苏墨晨

最新推荐文章于 2025-03-31 11:49:20 发布

阅读量513

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_36529459/article/details/80370641

版权

react 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了React中如何通过props将父组件的功能传递给子组件。通过一个具体的例子，展示了如何定义一个父组件的函数，并在子组件中通过props别名调用该函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在使用react组件的时候，因为都是单组件，因此，在子组件需要父组件的方法的时候，我们就要想办法来获取了。

react中是提供的单向绑定，而并不是像vue是可以进行双向绑定的。当然拉，react也可以做当逆向传输，这个我将在下一篇文章中介绍。

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

举个栗子~~:

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

}

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

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

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

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