Question

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

在上面的函数中，您可以看到我正在使用单参数道具和其他参数接收数据在下面经过的物体。但是我不知道它为什么起作用，我在下面的给定语法中传递了两个值，一个是props，另一个是对象titlevalue。希望您能理解我的查询，我是React Native的新手。

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

Answer 1

使用组件：

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

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

因此，您声明{...props}和title是道具，而您正在做的就是将所有现有的道具( as {...props}) + title传递给其他组件。

定义组件：

因此将传递给您进行创建的道具的所有内容都将在props的内部声明中被接收

function NavigationItem(props)

要注意的地方

不要混淆道具名称作为function NavigationItem(props)中的参数，您可以在此处使用任何名称，例如kamal。但是使用kamal后，您必须访问传递的道具，例如kamal.title。

另一方面，将整个道具作为{...props}传递给其他组件不是一种好方法。如果re-render内部发生任何更改，它将{...props}进行修改。

Answer 2

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

如此给予

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

传播后（假设道具仅具有navigation属性），以了解添加此代码的过程，但实际上是通过传播属性完成的。

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

现在NavigationItem组件具有道具，如导航和 titleValue

将道具与其他对象传递给子组件

2 个答案: