Question

我已经对本机组件（例如Eg：myComponent）做出反应，它具有以下代码来显示this.props.text中的文本。此文本props在myComponent中定义为字符串。

<Text size='large'
            style={styles.text}
            textId={this.props.text}
            values={this.props.values}>
          {this.props.text}
 </Text>

当我通过发送动作给出如下文本时，它将文本显示为String.But我希望组件显示为蓝色突出显示Link

yield put(myComponent.displayAction(displayType,"<Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>Link</Text>}")

如果我直接在myComponent中硬编码字符串，它会显示我们可以执行onclick的链接。

<Text size='large'
        style={styles.text}
        textId={this.props.text}
        values={this.props.values}>
      //{this.props.text} => removed this and hardcoded the string below
      "<Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>Link</Text>}"

有任何帮助将此显示为链接？

Answer 1

您不能将带有JSX的字符串用作元素。在您的硬编码示例中，编译器将其视为元素，并忽略引号。

将text prop更改为元素而不是字符串，然后将该元素传递给displayAction，应该可以正常工作。

或者，您可以让text道具包含文本而不是元素，并将其显示为：

<Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>{this.props.text}</Text>

React native：将HTML字符串传递给组件显示为文本

1 个答案: