Question

在应用程序中，我使用的倒数计时器组件看起来像这样。

<TimerCountdown
          initialSecondsRemaining={100000000}
          onTick={() => console.log('tick')}
          onTimeElapsed={() => console.log('complete')}
          allowFontScaling
          style={{ fontSize: 20 }}
/>

它工作得非常好，但我希望在react-native-element按钮中包含倒计时文本，我就是这样做的。

<Button
    textStyle={[styles.textStyle]}
    title={<TimerCountdown
          initialSecondsRemaining={100000000}
          onTick={() => console.log('tick')}
          onTimeElapsed={() => console.log('complete')}
          allowFontScaling
          style={{ fontSize: 20 }}
          />}
    buttonStyle={styles.detailsStyle}
    containerViewStyle={styles.buttonContainerViewStyle}
  />

这样也可以正常工作，除了我收到“'对象'类型'无效道具'标题的警告，提供给'按钮，预期'字符串'。

如何将对象转换为字符串以清除警告？我试过这样做：

  <Button
    textStyle={[styles.textStyle]}
    title={`${<TimerCountdown
          initialSecondsRemaining={100000000}
          onTick={() => console.log('tick')}
          onTimeElapsed={() => console.log('complete')}
          allowFontScaling
          style={{ fontSize: 20 }}
    />}`}
    buttonStyle={styles.detailsStyle}
    containerViewStyle={styles.buttonContainerViewStyle}
  />

但按钮最终显示“[object Object]”

谢谢。

Answer 1

当你想要一个字符串时，你试图将一个组件作为道具传递。在内部，<Button />组件可能会执行{this.props.title}之类的操作，因此传递组件只能巧合。您无法将React组件转换为字符串。您必须接受警告，或者不将组件传递给该道具。

Answer 2

您可以使用TouchableOpacity组件创建自己的按钮，而不是使用Button组件。然后，您可以将TimerCountdown用作子组件而不是属性。

将JSX对象作为字符串传递的问题

2 个答案: