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

Question

我最近学会了如何基于组件传递不同的样式，并希望相同的规则适用于传递不同的道具，但我很难用它。

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

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

但我的模拟器中出现错误：JSON Value '(2, 1)' of type NSMutableArray cannot be converted to NSNumber

有什么建议？

谢谢！

Answer 1

您不能像使用样式一样执行此操作。我猜你想要将行数默认为2，但是当用户明确地传递它时，要使用该值。如果是这样，您可以使用逻辑OR运算符：

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

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

---

请注意，还有一种更可读的内置方式，通过逻辑OR完成此操作，分配defaultProps static property。根据文件：

您可以通过分配特殊的defaultProps属性来定义props的默认值

从而：

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

TextTitle.defaultProps = {
  numberOfLines: 2
};

这与上面的内容相同，只是更具可读性和“语义正确”，因为React为您提供了内置功能。