有没有办法在 React 中访问嵌套的 DOM 元素？

Question

在我的应用程序中，我有一个输入字段和一个存储用户输入值的 ref。 我还在一个 div 中有一堆 React Links，它们作为推荐的关键字供用户搜索。

有没有办法让我动态修改与用户输入具有相同文本的 React Link 元素？

EG：用户输入“shoe”并且有一个<Link to="/display?shoe"> Shoe </Link> ，然后我可以获取该元素并添加一些内联 css 到它。

片段

Answer 1

在 React 中，您可以使用 Refs 访问 DOM 元素。

创建 Refs：使用 React.createRef() 创建并使用 ref 属性将其附加到 React 元素。

Answer 2

如果您将用户输入存储在 state 中，则可以做到这一点。 因此，每当 state 更改时， Link都会更新

例子：

const [userInput, setUserInput] = useState(''); // store input value
<Link to=`/display?${userInput}`>{userInput}</Link>