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

Question

我正在做练习以在 codecademy 上学习 react native。

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

我需要将颜色作为参数传递给我的 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 }} />);