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

Question

我在 td 标签中插入 React 组件时遇到问题。这个组件应该被插入到被点击的那个 td 中。

如您所见，每个 td 都有 onClick 事件监听器用于 checkPlayer 功能。此函数检查 sign state 的值，并取决于该值 X 组件或 O 组件将插入到该特定 td 中。

你们能帮我如何渲染这样的组件吗？目前的做法只写[object object]

我的目标 - 输出

<td>{<X />}</td>

X分量，O分量差不多

import React from 'react';

//styles
import './X.scss';

function X(){
    return(
        <div className="X">
            <p>X</p>
        </div>
    )
}

export default X;

App.js

function 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;