Question

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

但是我不能像这样使用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>
    }

Answer 1

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

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

Answer 2

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

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

）; }

Answer 3

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

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

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

3 个答案: