javascript - 文本组件给定不同组件中的行数

Question

我最近学习了如何根据组件传递不同的样式，并希望相同的规则应用于传递不同的 Prop ，但我很难做到这一点。

所以这里我有一个文本组件:

const TextTitle = ({ text }) => (
  <Text
    accessible={true}
    style={styles.songTitleText}
    numberOfLines={2}
    ellipsizeMode={'tail'}
  >
    {text}
  </Text>
);

但我想在其他地方使用此文本组件，但只给它 numberOfLines={1}

所以我尝试了

const SongTitle = ({ text, numberOfLines }) => (
  <Text
    accessible={true}
    style={styles.songTitleText}
    numberOfLines={[2, numberOfLines]}
    ellipsizeMode={'tail'}
  >
    {text}
  </Text>
);

然后在另一个组件中我用以下方式调用它:

<TextTitle
 style={styles.itemText}
 text={Text_Word}
 numberOfLines={1}
 />

但是我在模拟器中遇到错误:NSMutableArray 类型的 JSON Value '(2, 1)' 无法转换为 NSNumber

有什么建议吗？

谢谢!

Answer 1

您不能像处理样式那样执行此操作。我猜您希望将行数默认为两行，但是当用户明确传递它时，使用该值。如果是这样，您可以使用逻辑或运算符:

const TextTitle = ({ text, numberOfLines }) => (
  <Text
    …
    numberOfLines={numberOfLines || 2}
  >
    …
  </Text>
);

这会检查numberOfLines是否已传递给组件。如果是，则使用它，如果不是，则使用默认值 2。这是因为logical OR如果左操作数为真，则运算符计算结果为左操作数；如果为假，则计算右操作数。

<小时/>

请注意，还有一种更易读的内置方法可以通过逻辑 OR 来完成此操作，即分配 defaultProps static property 。根据文档:

You can define default values for your props by assigning to the special defaultProps property

因此:

const TextTitle = ({ text, numberOfLines }) => (
  <Text
    …
    numberOfLines={numberOfLines}
  >
    …
  </Text>
);

TextTitle.defaultProps = {
  numberOfLines: 2
};

这与上面的功能相同，只是更具可读性并且“语义正确”，因为 React 将此作为内置功能提供给您。