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

Question

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

如您所见，每个 td 都有用于checkPlayer函数的onClick事件侦听器。此函数检查符号状态的值，并根据该值将 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;

应用程序.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() {&nbsp; const [sign,setSign] = useState(true);&nbsp; const [values, setValues] = useState([["", " ", " "],[" ", " ", " "],[" ", " ", " "]]);&nbsp; function updateValue(row, column){&nbsp; &nbsp; &nbsp; var newValue = [...values];&nbsp; &nbsp; &nbsp; newValue[row][column] = sign == true ? "X" : "O";&nbsp; &nbsp; &nbsp; setSign(!sign);&nbsp; &nbsp; &nbsp; setValues(newValue);&nbsp; }&nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(0,0)}>{values[0][0]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(0,1)}>{values[0][1]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(0,2)}>{values[0][2]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(1,0)}>{values[1][0]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(1,1)}>{values[1][1]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(1,2)}>{values[1][2]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(2,0)}>{values[2][0]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(2,1)}>{values[2][1]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td onClick={() => updateValue(2,2)}>{values[2][2]}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; </div>&nbsp; );}export default App;