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

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

我似乎为那些未来来到这里的人找到了一种更“反应灵敏”的方法

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 2

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

 //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 组件，用于呈现自动完成组件中的每个项目。 这是完整的示例。

const items = [
 "React",
 "Angular",
 "Vue",
 "Node",
 "Express",
 "PHP",
 "Laravel",
 "Material",
 "CSS",
 "HTML"
];

function ListItem(props) {
 if (props.value.indexOf(props.autoValue) > -1 && props.autoValue.length > 0) {
 const main = props.value;
 const val =
  main.slice(0, main.indexOf(props.autoValue)) +
  "<b>" +
  props.autoValue +
  "</b>" +
  main.slice(
    main.indexOf(props.autoValue) + props.autoValue.length,
    main.length
  );

 return (
  <div>
    <span dangerouslySetInnerHTML={{ __html: val }} />
    <hr />
  </div>
);
} else {
return (
  <span>
    {props.value}
    <hr />
  </span>
 );
 }
}

function NumberList(props) {
 const numbers = props.numbers;
 const listItems = numbers.map(number => (
  <ListItem
   key={number.toString()}
   value={number}
   autoValue={props.autoValue}
  />
 ));
 return <div>{listItems}</div>;
}

class App extends Component {
 constructor(props) {
 super(props);
 this.state = {
   inputValue: ""
 };

 this.update = this.update.bind(this);
}

update(e) {
 e.preventDefault();
 this.setState({ inputValue: e.target.value });
}

render() {
 return (
   <div>
     <input
       type="text"
       onChange={this.update}
       name="inputValue"
       value={this.state.inputValue}
     />
     <NumberList numbers={items} autoValue={this.state.inputValue} />
     <span> {this.state.inputValue} </span>
   </div>
 );
 }
 } 

export default App;

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

Answer 3

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

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

Answer 4

扩展 @mantas-giniūnas 解决方案，我对其进行了增强以保持字母大小写。

function BoldedText({ text, shouldBeBold }) {
  const textArray = text.split(RegExp(shouldBeBold, "ig"));
  const match = text.match(RegExp(shouldBeBold, "ig"));

  return (
    <span>
      {textArray.map((item, index) => (
        <>
          {item}
          {index !== textArray.length - 1 && match && (
            <b>{match[index]}</b>
          )}
        </>
      ))}
    </span>
  );
}