如何在详细的道具 React-Native 中获取道具变量

Question

我有一个这样的自定义组件

const MyCustomComponent = ({ value, style }) => {
   // I can access value & style with value and style
   return <View style={style}>
      <Text>{value}</Text>
   </View>
}

我可以用

调用它

<MyCustomComponent value="123" style={{ color: "blue" }} />

我的问题是如何获取参数或 alyelse 以将所有道具传递给我的组件？

在本机函数中，我可以使用 arguments 将 allProps 作为数组获取并将其设置在新变量中，例如 const allProps = arguments[0]

箭头函数呢？

Answer 1

您想使用单个变量获得 'value' 和 'style' 道具吗？

您可以使用：

const MyCustomComponent = (props) => {
   // I can access value & style with value and style
   return <View style={props.style}>
      <Text>{props.value}</Text>
   </View>
}

Answer 2

你这里有一个功能组件，它是这样构建的，它只接收一个对象 - 即道具。当你这样做时：const MyComponent({value, style}) 你解构了 prop 对象，只提取了两个变量。

您应该这样做：

const MyCustomComponent = (props) => {

 //you can access the values like this
 console.log(props.style, props.value)

 //or you can access them like this which is the same thing you did 
 //earlier  
 const {style, value} = props;
 console.log(style, value)

 return (
  ...
 )

}

请记住，您需要在范围内包含 React，因此请务必在顶部导入它：

import React from 'react';

功能组件在 React 文档中有很好的解释：https://reactjs.org/docs/components-and-props.html

如何在详细的道具 React-Native 中获取道具变量

How to get props variable in detailed props React-Native

components

arguments

ecmascript-6

react-native

arrow-functions