反应原生：将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> 

当我给下面的文本通过发送一个动作，它显示的文本String.But我期待成分显示为蓝色高亮显示的链接

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>