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属性
来定义道具的默认值

因此：

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

TextTitle.defaultProps = {
  numberOfLines: 2
};

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

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

1 个答案: