使用其他对象将道具传递给子组件答案

【问题标题】：Passing props to child component with other object使用其他对象将道具传递给子组件
【发布时间】：2020-09-07 00:17:49
【问题描述】：

function NavigationItem(props){                   
return( 
<TouchableOpacity 
onPress={(view)=>props.navigation.closeDrawer()}>     
<Text style={customStyle.headerStyle}>{props.titleValue}</Text>
<View style={customStyle.dividerStyle}  />
  </TouchableOpacity>
  ) 
}

在上面的函数中，你可以看到我在单参数 props 和其他中接收数据一个从下方经过的物体。但我不知道它为什么起作用我传递了两个值，一个是 props，另一个是下面给出的语法中的 object titlevalue。我希望你能理解我的问题，我是 react native 的新手。

<NavigationItem {...props} titleValue={"Profile"} ></NavigationItem>

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

使用组件：

首先，你必须了解什么是 react native 中的 props 以及如何将它们传递给其他组件。

<NavigationItem {...props} titleValue={"Profile"} ></NavigationItem>

所以在你的声明中 {...props} 和 title 是道具，你所做的是将所有现有道具 ( as {...props}) + title 传递给其他一些组件。

定义组件：

因此，任何传递给您的组件进行创建的道具都将在内部声明中作为props 接收

function NavigationItem(props)

注意事项

不要对 function NavigationItem(props) 中的 props 名称作为参数感到困惑，您可以在这里使用任何名称，它可以是 kamal。但是在使用kamal 之后，您必须访问您传递的道具，例如kamal.title。

还有一点，将整个道具作为{...props} 传递给其他组件并不是一个好方法。如果{...props} 内部发生任何变化，它将re-render。

【讨论】：

是的，谢谢你的回复，现在我清楚了我在将数据传递给子组件时感到困惑。

【解决方案2】：

它与Spread Attributes 相关{...props} 表示您没有传递道具，因为它是道具属性。

为了给予

<NavigationItem {...props} titleValue={"Profile"} ></NavigationItem>

传播后（假设道具只有navigation属性）用于理解添加此代码，但实际上是通过传播属性完成的。

<NavigationItem navigation={navigation} titleValue={"Profile"} ></NavigationItem>

现在NavigationItem 组件的属性为 navigation 和 titleValue

【讨论】：