React native：HTML文字列をコンポーネントに渡すと、テキストとして表示される

Question

this.props.textのテキストを表示するためのコードが以下のようなネイティブコンポーネント（For Eg：myComponent）に反応しました。このテキストの小道具は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>}") 

を強調されているように、私はコンポーネントが表示するように期待していString.Butとしてテキストを表示していますmyComponentの文字列、onclickを実行できるLinkを表示しています。

<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>