在React组件的HTML元素内添加属性

Question

假设我有一个React组件 ，但是无法更改其源代码 。可以说，该组件<Demo />呈现了许多<a> ...<a/> HTML元素。是否可以通过编程方式在这些元素内添加属性？

Answer 1

您可以使用包装器在其中为包装器标签创建引用。这样您就可以查询特定元素并相应地更改其属性：

const wrapperComponent = props => {
  const myRef = React.createRef()

  useEffect(() => {
    myRef.current.querySelector("a").innerText = "got changed!"
  }, [myRef])

  return (
    <div ref={myRef}>
      <Component {...props} />
    </div>
  )
}