突出显示React中的搜索文本

Question

我正在研究React，并且在实现过滤器功能之后，我必须考虑如何突出显示搜索字符串中的匹配单词。

我的app.js是：

import React, { Component } from 'react';
import ListValues from './ListValues';
class App extends Component {
  state = { 
    list: ['First string 1', 'second String 2', 'third string 3', 'teste rwe'],
    value: ''
   }
  render() { 
    return ( 
      <div>
        <input 
          value={this.state.value}
          onChange={e => this.setState({ value: e.target.value })} 
        />
        <ListValues list={this.state.list} value={this.state.value}/>
      </div> 
    );
  }
}
export default App;

和我的listValues.js文件是：

import React from 'react';
const ListValues = (props) => {
    return ( 
        <div>
          <ul>
              {props.list.filter(name => {
                return name.toLowerCase().indexOf(props.value.toLowerCase()) >= 0;
              }).map((value, i) => {
                return <li key={i}>{value}</li>
              })}
          </ul>
        </div>
     );
}
export default ListValues;

index.js文件是标准代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

除非我在这里缺少点，否则您可以根据您传递到组件的道具的价值来使用样式的组件（背景颜色）进行有条件应用样式（背景颜色）。

import styled from 'styled-components'
const ListValue = styled.li`
  ${({ active }) => active && `
    background: blue;
  `}
`;
const ListValues = (props) => {
    return ( 
        <div>
          <ul>
              {props.list.filter(name => {
                return name.toLowerCase().indexOf(props.value.toLowerCase()) >= 0;
              }).map((value, i) => {
                return <ListValue active={true} key={i}>{value}</ListValue>
              })}
          </ul>
        </div>
     );
}

https://www.styled-components.com/docs

Answer 2

我找到了一个准备好的组件。如果您需要自定义，请根据需要进行源代码并根据需要进行调整。

react-highlight-words