Question

有人可以帮助我从功能组件中渲染文本吗？这是我的情况。我有一个功能来突出显示字符串中的自定义字符。功能就是这样。

 highlight = (string) => {
    var re = new RegExp('ABC', 'g')
    var result = string.replace(re, <Text style={{ fontWeight : 'bold' }}>ABC</Text>)
    return(
        <Text>{result}</Text>
    )
}

然后，在我的类的render函数中，我这样调用此函数：

 <Text style={{marginBottom: 10}}>
    {this.highlight('ABC DEF GHI')}
 </Text>

目标是，我想给ABC中的粗体ABC DEF GHI。但是当我运行此命令时，结果是这样的：[object Object] DEF GHI ..有人可以帮助我，所以结果是 ABC DEF GHI

Answer 1

单词将始终由空格分隔吗？如果是这样，我会做这样的解决方案：

{
  'ABC DEF GHI'.split(" ").map(
      s => s.match('ABC', 'g') ? 
        <Text style={{ fontWeight : 'bold' }}>{s}</Text> : 
        <Text>{s}</Text>)
 }

Answer 2

[对象对象] 实际上是由代码中此行引起的错误语句

 var result = string.replace(re, <Text style={{ fontWeight : 'bold' }}>ABC</Text>)

现在您的结果变量成为 string.replace（re，<Text style={{ fontWeight : 'bold' }}>ABC</Text>）并返回错误。
这是因为replace的第二个参数必须是字符串，否则会产生意外的令牌...错误。
解决此问题

  highlight = (string) => {
    var boldString = "ABC"
    var re = new RegExp(boldString, 'g')
    var result = string.replace(re,"")
    return{
        boldText:boldString,
        regularText:result
     }

}

以及您的渲染功能中

<Text style={{marginBottom: 10}}>
    <Text style={{ fontWeight : 'bold' }}>{this.highlight("ABC DEF GHI").boldText}</Text>
    {this.highlight('ABC DEF GHI').regularText}
 </Text>

如何在react-native中将组件呈现为文本

2 个答案: