REECT本地：带有颜色参数的自定义组件

Question

我正在进行练习，以学习在编码上学习反应的人。

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

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

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 }} />);