我在 td 標簽中插入 React 組件時遇到問題。該組件應插入到被單擊的那個 td 中。如您所見，每個 td 都有用于checkPlayer函數的onClick事件偵聽器。此函數檢查符號狀態的值，并根據該值將 X 組件或 O 組件插入到該特定 td 中。你們能幫我如何渲染這樣的組件嗎？當前的方法只寫[object object]我的目標——輸出<td>{<X />}</td>X組件，O組件幾乎相同import React from 'react';//stylesimport './X.scss';function X(){    return(        <div className="X">            <p>X</p>        </div>    )}export default X;應用程序.jsfunction App() {  const [sign,setSign] = useState(true)  function checkPlayer(e){    //1st player    if(sign === true){      e.target.innerHTML = <X />;            setSign(false);    }          //2nd player    if(sign === false){      e.target.innerText = <O />;      setSign(true);    }}App.js 的 HTML 部分  return (    <div className="App">      <div className="container">        <table>          <tbody>            <tr>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>            </tr>            <tr>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>            </tr>            <tr>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>            </tr>          </tbody>        </table>      </div>    </div>  );}