react native:带color参数的自定义组件

Question

我做这个练习是为了在codecademy上学习native。

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

我需要将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 }} />
);

但是我被告知&;View应该有一个背景色，由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 }} />);