反应本机：将HTML字符串传递给组件时显示为文本

Question

我有反应原生组件（例如：myComponent），它有下面的代码显示文本从this.props.text.这个文本道具被定义为字符串myComponent。

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

当我通过发送一个动作给出如下文本时，它将文本显示为字符串。但我希望组件显示为蓝色突出显示的链接

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的字符串用作元素。在您的硬编码示例中，编译器将其视为一个元素，并忽略引号。

将文本属性更改为元素而不是字符串，然后将该元素传递给显示操作，应该可以工作。

或者，您可以让textprop包含文本而不是元素，并按如下方式显示：

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