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

Question

我有 React 本机组件（例如：myComponent），它具有以下代码来显示来自 this.props.text 的文本。此文本道具在 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 中硬编码字符串，它会显示 Link 我们可以执行 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>}"

将其显示为 Link 有什么帮助吗？

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 字符串传递给组件显示为文本

React native : Passing HTML string to component is displaying as text

javascript

reactjs

react-native

react-native-text