如何为@coveo/atomic-react的AtomicSearchBox设置占位文本？

在@coveo/atomic-react 1.2.2版本中，直接给AtomicSearchBox组件添加placeholder属性无法修改默认的“Search”占位文本，原因是该版本的React封装未将placeholder作为顶层props暴露。以下是两种可行的解决方法：

方法一：通过elementProps传递属性 #

利用React封装提供的elementProps参数，将占位文本属性传递给底层的web component：

<AtomicSearchBox 
  elementProps={{ placeholder: "Search by location name or zipcode" }}
>
    <AtomicSearchBoxQuerySuggestions maxWithQuery={5} />
    <AtomicSearchBoxRecentQueries maxWithQuery={5} />
</AtomicSearchBox>

方法二：通过Ref操作原生Web Component #

如果elementProps方式不生效，可以通过React的ref获取底层的atomic-search-box元素，手动设置占位文本：

import { useRef, useEffect } from 'react';
import { AtomicSearchBox } from '@coveo/atomic-react';

function CustomSearchBox() {
  const searchBoxRef = useRef(null);

  useEffect(() => {
    const webComponent = searchBoxRef.current?.querySelector('atomic-search-box');
    if (webComponent) {
      webComponent.placeholder = "Search by location name or zipcode";
    }
  }, []);

  return (
    <AtomicSearchBox ref={searchBoxRef}>
      <AtomicSearchBoxQuerySuggestions maxWithQuery={5} />
      <AtomicSearchBoxRecentQueries maxWithQuery={5} />
    </AtomicSearchBox>
  );
}

内容的提问来源于stack exchange，提问作者Erica Stockwell-Alpert