React native: передача строки 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. Но я ожидаю, что компонент будет отображаться синим цветом. Ссылка

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

Если я непосредственно жестко закодировал строку в myComponent, он отображает ссылку, по которой мы можем выполнить щелчок мышью.

<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 поддержать как элемент, а не строку, а затем передать этот элемент displayAction вместо этого должно работать.

Кроме того, вы можете иметь text prop содержит текст вместо элемента и отображает его так:

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