JSX 中有条件地加粗文本

Question

我正在开发 Next.JS Google 克隆。

我正在尝试编写一些 CSS 以使用 Google API 将搜索结果对象中的搜索输入加粗。

如果搜索词出现在该值中，我如何在我的 {result.sn-p} 中将 {router.query.term} 加粗？

Header.js

function Header() {
  const router = useRouter();
  const searchInputRef = useRef(null);

  const search = (e) => {
    e.preventDefault();
    const term = searchInputRef.current.value;

    if (!term) return;

    router.push(`/search?term=${term}`);
  };
  return (
    <header>
          <input
            type="text"
            ref={searchInputRef}
            className="flex-grow w-full focus:outline-none"
            defaultValue={router.query.term}
          />
    </header>
  );
}

export default Header;

SearchResults.js

function SearchResults({ results }) {
  return (
    <div>
      {results.items?.map((result) => (
        <div key={result.link}>
          <p className="line-clamp-2">{result.snippet}</p>
        </div>
      ))}

      <PaginationButtons />
    </div>
  );
}

export default SearchResults;

Answer 1

您可以使用内联样式轻松做到这一点；

<p className="line-clamp-2"  
style={{fontWeight: condition ? bold : normal}}
>
{result.snippet}
</p>