React JSX-以粗体显示子字符串

时间:2018-06-25 11:51:40

标签: javascript reactjs

在创建自定义自动完成组件时,我遇到了这个问题:我得到了一个字符串和子字符串(字符串的第一部分,用户在自动竞争字段中输入的部分),并且需要在结果列表中以粗体显示该部分。

但是我不能像这样使用str.replace

    var re = new RegExp(find, 'g');
    return str.replace(re, '<b>'+find+'</b>');

因为它将返回字符串,所以我需要JSX。

所以基本上问题是-我有JSX,我需要将其以粗体显示。我需要一个带有JSX的函数,并且喜欢在特殊的地方在其中注入<b>标签

这是我到目前为止所得到的

    boldJSX(str, find){
        if(!find) return str;
        return <span><b>{find}</b>{str.slice(find.length)}</span>
    }

3 个答案:

答案 0 :(得分:2)

首先,如果在给定列表中退出,则需要找到并提取适当的子字符串(要查找的字符串),并通过提取该子字符串来创建自定义字符串,如下所示。

select battery_volts
from ems
where date between 20180606 and 20180606

现在,您必须将 //autoValue - value you are looking for //main - item value const val = main.slice(0, main.indexOf(autoValue)) + "<b>" + autoValue + "</b>" + main.slice( main.indexOf(autoValue) + autoValue.length, main.length ); 用于dangerouslySetInnerHTML或要用于呈现自动完成组件中每个项目的任何自定义span组件。 这是完整的示例。

HTML

工作示例。 https://codesandbox.io/s/n9n65wqj5j

答案 1 :(得分:1)

对于以后来这里的人来说,我似乎已经找到了一种更加“保守”的方法

function BoldedText({ text, shouldBeBold }) {
  const textArray = text.split(shouldBeBold);
  return (
    <span>
      {textArray.map((item, index) => (
        <>
          {item}
          {index !== textArray.length - 1 && (
            <b>{shouldBeBold}</b>
          )}
        </>
      ))}
    </span>

); }

答案 2 :(得分:0)

假设您已经知道传入的建议与您可以执行的过滤器匹配

getSuggestionText = (suggestion, filter) => (
  <span>
    <b>{suggestion.slice(0, filter.length}</b>
    {suggestion.slice(filter.length)}
  </span>
);