在React中突出显示搜索到的文本

state = {
  searchKeyword: ""
};

handleChange = (event) => {
  this.setState({ searchKeyword: event.target.value });
};

render() {
  return (
    <input type="text" onChange={this.handleChange} />
  );
}

render() {
  const { searchKeyword } = this.state;
  const text = "这是一段包含搜索关键词的文本";

  const highlightedText = text.replace(
    new RegExp(searchKeyword, "gi"),
    (match) => `<span class="highlight">${match}</span>`
  );

  return (
    <div dangerouslySetInnerHTML={{ __html: highlightedText }} />
  );
}

.highlight {
  background-color: yellow;
}