javascript - 有没有办法在 TextInput 中渲染组件？

Question

我正在尝试在 TextInput 上呈现@提及，我尝试在 TextInput 中将所需的组件和文本作为数组传递。

它可以工作，但是一旦更改输入，提及就会被转换为纯文本。有什么方法可以保留渲染的组件并防止它被转换为纯文本？

代码：

  renderMessageWithMentions = (messageText: string) => {
    const mentionsRegExp = /<@(.*?)>/g;
    const mentionUIDs = R.match(mentionsRegExp, messageText).map(mention => {
      let filteredStr = mention.replace(/<@/g, "");
      filteredStr = filteredStr.replace(/>/g, "");
      return filteredStr;
    });

    return R.map(text => {
      if (mentionUIDs.includes(text)) {
        return <Mention uid={text} />;
      }

      return text;
    }, R.split(mentionsRegExp, messageText));
  };

提及的格式如下<@UID>。在这里，我正在循环messageText，如果是提及，我将返回 Mention 组件，它将以蓝色文本呈现用户名，否则返回纯文本。

这是我正在渲染的：

  setText = text => {
    const { isTrackingStarted, previousChar } = this.state;
    const lastChar = text.substr(text.length - 1);
    const wordBoundry = R.trim(previousChar).length === 0;

    if (lastChar === "@" && wordBoundry) {
      this.startTracking();
    } else if ((lastChar === " " && isTrackingStarted) || text === "") {
      this.stopTracking();
    }

    this.setState({ text, previousChar: lastChar });
  };

<TextInput onChangeText={this.setText}>
  {this.renderMessageWithMentions(messageText)}
</TextInput>

图片：更改文本之前

图片：更改文字后

标签： javascriptreact-native