react native：带有颜色参数的自定义组件

Question

我正在 codecademy 上练习学习 React Native。

我被告知“在 React 中，属性作为第一个参数的对象传递给我们的组件。您需要在自定义组件中添加此参数并使用颜色属性作为背景色。”

我需要将颜色作为参数传递给我的 Box 自定义组件。这是我的代码：

export const Box = (color) => (
<View color={color} style={{ width: 100, height: 100, backgroundColor: this.props.color }} />
  );

它给我一个语法错误。我也试过了:

export const Box = (color) => (
<View style={{ width: 100, height: 100, backgroundColor: color }} />
  );

但是我被告知“视图应该有一个由属性颜色设置的背景颜色”。我做的时候也是这样

 export const Box = (color) => (
    <View style={{ width: 100, height: 100, backgroundColor: {color} }} />
      );

这很基础，但在 React 中调用变量并正确使用它们时，我总是犯错...如果你能帮助我，那就太好了！谢谢

Answer 1

基本上，你可以获得这样的道具：

export const Box = ( props ) => (
<View color={props.color} style={{ width: 100, height: 100, backgroundColor: props.color }} />);

react native : custom component with color parameter