Блог

Я нашел несколько тесно связанных вопросов, но не настолько близких. Я пытаюсь стилизовать только искомую часть результата поиска. Например, если запрос «Thi», я хочу, чтобы результат выглядел так, как будто они разваливаются. Моя проблема в том, что он отображает [объект объекта] прямо в браузере. Как сделать так, чтобы он отображал нужный текст и я мог свободно стилизовать его с помощью CSS3? Другая проблема, с которой я сталкиваюсь, — это предупреждение в консоли браузера о том, что

 index.js:1 Warning: Each child in a list should have a unique "key" prop.
 

Код ниже:

 import React, { Fragment } from "react";
import CancelIcon from "@material-ui/icons/Cancel";
import CallMadeIcon from "@material-ui/icons/CallMade";

export default function SearchBar(props) {
  return (
    <Fragment>
      <div className="search">
        <div
          className="search-input-container"
          ref={props.searchInputContainerRef}
        >
          <label htmlFor="search-input"></label>
          <input
            type="text"
            id="search-input"
            placeholder={props.placeholder}
            onChange={props.handleSetSearchTerm}
            value={props.searchTerm}
            ref={props.searchInputRef}
            onFocus={props.blurAllOnSearch}
            onBlur={props.blurAllOnSearch}
            onKeyUp={props.handleFilter}
          />
          {props.searchTerm === "" ? (
            <button
              ref={props.searchIconVectorRef}
              type="button"
              className="search-icon-btn"
              onClick={props.focusSearchInput}
            ></button>
          ) : (
            <CancelIcon
              className="clear-btn"
              type="button"
              onClick={props.clearSearchInput}
            />
          )}
          <button className="go-search-btn">Go</button>
        </div>
        {props.searchResults.length !== 0 amp;amp; (
          <div className="search-results">
            {props.searchResults.slice(0, 15).map((value, key) => {
              const boldResultPart = (result, query) => {
                let re = new RegExp(query, "ig");
                return result
                  .replace(/- /g, "")
                  .replace(/./g, "")
                  .replace(re, <span className="boldFont"> ${query} </span>); // <-- *My problem is this span renders as [object Object] in the browser*
              };

              let bolded = boldResultPart(value.title, props.searchTerm);

              return (
                <li className="data-item">
                  <a
                    className="result"
                    href={value.link}
                    target="_blank"
                    rel="noreferrer"
                  >
                    {bolded}
                  </a>
                  <CallMadeIcon className="call-made-icon" />
                </li>
              );
            })}
          </div>
        )}
      </div>
    </Fragment>
  );
}

 

Замена преобразует ваш интервал в строку. Попробуйте создать интервал на основе результатов вашего регулярного выражения. Вот пример:

 function SearchBar(props) {
  return <div>
     {props?.searchResults.length amp;amp; (
        <div className="search-results">
            {props.searchResults.slice(0, 15).map(value => {
                const boldResultPart = (result, query) => {
                    let re = new RegExp(query, "ig");
                    let results = result.replace(/- /g, "")
                    .replace(/./g, "")
                    .split(re);
                    return [results, [...(result.matchAll(re))].map(x => x[0])]
                };
                const [resultSplit, resultFind] = boldResultPart(value.title, props.searchTerm)
                const makeBold = (q) => <strong className="boldFont">{q}</strong>              
                const bolded = resultSplit.map((i,c) =>  c ? <span key={c}>{makeBold(resultFind[c-1])}{i}</span> : i);
          
                return (
                <li key={value.title} className="data-item">
                    <a
                    className="result"
                    href={value.link}
                    target="_blank"
                    rel="noreferrer"
                    >
                    {bolded}
                    </a>
                </li>
                );
            })}
        </div>
    )}
    </div>
      

}


const Container = () => {
    return <SearchBar     
        searchResults={[
            { title: '', link: '/fooa' },
  
            { title: 'A', link: '/fooa' },
            { title: 'Afoo', link: '/fooa' },
            { title: 'AfooA', link: '/fooa' },
            { title: 'Foobar', link: '/barbar' },
            { title: 'Foobar foo', link: '/barbar' },
            { title: 'Foobar Foo', link: '/barbar' },
            { title: 'Afoo A Foobar', link: '/barbar' },
        
        ]}
        searchTerm="foo"
      />
}

ReactDOM.render(

    <Container />,

    document.getElementById("root")

)
 

Это возвращает:

• A
• Афу
• Оооо
• Буфет
• Фубар фу
• Фубар Фу
• Ку-Ку, Буфет