React 使用事件处理程序动态添加 html 元素

Question

是否可以在react中添加带有事件处理程序的按钮？

// 这工作正常，但它是纯 javascript 的onclick，我怎样才能用 React js 制作这个元素onClick？

这是参考代码，我的场景是动态附加html代码

const Button = () => {
      const dynamicElement = () => {
           let li = document.createElement('li');
               li.className = 'dynamic-link'; // Class name
               li.innerHTML = "I am New"; // Text inside
               document.getElementById('links').appendChild(li);
               li.onclick = function(){ alert(0) } 
      }

         useEffect(() => {
             dynamicElement();
         }, [])
}

Answer 1

您可以将您的函数转换为这样的函数组件。

const DynamicElement = () => {
    return (
      <li onClick={()=>alert(0)} className="dynamic-link">I am New</li>
    )
}
const Button = () => {
    const [visible, setVisible] = useState(false);
    useEffect(()=>setVisible(true), [])
    // if visible is true return <DynamicElement/>, either way return null
    return visible ? <DynamicElement/> : null
}

BTWuseState是状态的钩子实现