Question

我尝试通过父组件中的道具将数据发送到React Native中的子项。 Parent Component

<Card>
  <CardSection>
    <Input
      proportion={5}
      label="Email"
    />
  </CardSection>
  <CardSection>
    <Input
      proportion={3}
      label="Password"
    />
  </CardSection>
</Card>

Children Component

const Input = ({ proportion, label }) => {
  const { inputStyle } = styles;
  inputStyle.flex = proportion;

  return (
    <View style={containerStyle}>
      <Text>{label}</Text>
      <TextInput style={inputStyle} />
    </View>
  );
};

const style = {
  inputStyle: {
    flex: 2
  }
};

我有错误You attempted set the key 'flex' with the value '3' on an object that is meant to be immutable and has been frozen。有趣的是，当我有一个<Input /> Component时，一切正常并设置flex: 5，我达到了我想要的水平，但是第二个<Input /> Component我得到了错误。我如何解决这个问题并正确设置？

Answer 1

我认为好方法是使用对象扩展运算符：

const Input = ({ proportion, label }) => {
  const { inputStyle } = styles;

  return (
    <View style={containerStyle}>
      <Text>{label}</Text>
      <TextInput style={{...inputStyle, flex: proportion}} />
    </View>
  );
};

const style = {
  inputStyle: {
    flex: 2
  }
};

您定义类似const的样式，因此您会收到错误。您也可以通过let将其定义为变量。

设置React Native子组件

1 个答案: