单击时如何在 <td> 中插入组件

Question

我在 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>  );}

Answer 1

干得好。我玩过它，这应该给你一个很好的方向。（注意：您需要使用 [...values] 创建一个新数组而不是引用旧数组，以便 UI 重新呈现）。

import React, {useState, useEffect} from 'react';

import logo from './logo.svg';

import './App.css';

function App() {

  const [sign,setSign] = useState(true);

  const [values, setValues] = useState([["", " ", " "],[" ", " ", " "],[" ", " ", " "]]);

  function updateValue(row, column){

      var newValue = [...values];

      newValue[row][column] = sign == true ? "X" : "O";

      setSign(!sign);

      setValues(newValue);

  }

  return (

      <div>

        <table>

          <tbody>

            <tr>

              <td onClick={() => updateValue(0,0)}>{values[0][0]}</td>

              <td onClick={() => updateValue(0,1)}>{values[0][1]}</td>

              <td onClick={() => updateValue(0,2)}>{values[0][2]}</td>

            </tr>

            <tr>

              <td onClick={() => updateValue(1,0)}>{values[1][0]}</td>

              <td onClick={() => updateValue(1,1)}>{values[1][1]}</td>

              <td onClick={() => updateValue(1,2)}>{values[1][2]}</td>

            </tr>

            <tr>

              <td onClick={() => updateValue(2,0)}>{values[2][0]}</td>

              <td onClick={() => updateValue(2,1)}>{values[2][1]}</td>

              <td onClick={() => updateValue(2,2)}>{values[2][2]}</td>

            </tr>

          </tbody>

        </table>

      </div>

  );

}

export default App;