如何将 React 组件分隔在不同的文件中以保持其正常工作并避免 TypeErrors？

Question

I'm implementing the reactjs.org tutorial, which is a tic-tac-toe game, but I'm trying to use hooks instead of classes as this tutorial does.

This is the code I've wrote in a single file and is working fine:

function Square(props) {
    return (
      <button className="square" onClick={props.onClick}>
        {props.value}
      </button>
    );
  }
  
  function Board(props) {
    
    const renderSquare = (i) => {
      return (
        <Square
          value={props.squares[i]}
          onClick={() => props.onClick(i)}
        />
      );
    }

      return (
        <div>
          <div className="board-row">
            {renderSquare(0)}
            {renderSquare(1)}
            {renderSquare(2)}
          </div>
          <div className="board-row">
            {renderSquare(3)}
            {renderSquare(4)}
            {renderSquare(5)}
          </div>
          <div className="board-row">
            {renderSquare(6)}
            {renderSquare(7)}
            {renderSquare(8)}
          </div>
        </div>
      );
    }
  
  function Game() {
    
    const [clickedSquares, setClickedSquares] = useState(Array(9).fill(null))
    const [xIsNext, setXIsNext] = useState(true)
    const [moves, setMoves] = useState(0)
    const [playsHistory, setPlaysHistory] = useState([{
        history: {
          squares: Array(9).fill(null)
        },
        xIsNext: true
      }])
      const index = 0

    const determineWinner = (squares) => {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
        }
    }
    return null;
    }  

    const handleClick = (i) => {
        const squares = clickedSquares.slice()
        if (determineWinner(squares) || squares[i]) return
        squares[i] = xIsNext ? 'X' : 'O';
        // console.log(xIsNext)
        setXIsNext(!xIsNext)
        // console.log(xIsNext)

        let current = playsHistory
        current ={
            history:{
                squares: squares},
            xIsNext: !xIsNext     
        }
        // console.log(current)
        setClickedSquares(squares)
        setMoves(prevMoves => prevMoves + 1)
        setPlaysHistory(prevPlays => ([...prevPlays, current]))
        console.log(playsHistory)
    }
    
    let winner =  determineWinner(clickedSquares)
    let status = winner ? `Winner: ${winner}` : `Next player: ${xIsNext ? 'X' : 'O'}`
    if(!winner && moves === 9) status = 'Draw'
 
      return (
        <div className="game">
          <div className="game-board">
            <Board
              squares={clickedSquares}
              onClick={(i) => handleClick(i)}
            />
          </div>
          <div className="game-info">
            <div>{status}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      );
  }

  export default Game

I'm done with the most of the functionalities, however I've been working in a single file. So I've tried to refactor my project dividing its functions in smaller files for each component. I've created three component files:

Square.jsx :

function Square(props) {
return (
  <button className="square" onClick={props.onClick}>
    {props.value}
  </button>
);
}

export default Square

Board.jsx :

function Board(props) {

const renderSquare = (i) => {
  return (
    <Square
      value={props.squares[i]}
      onClick={() => props.onClick(i)}
    />
  );
}

  return (
    <div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
}
export default Board;

and Game.jsx :

function Game() {
    
    const [clickedSquares, setClickedSquares] = useState(Array(9).fill(null))
    const [xIsNext, setXIsNext] = useState(true)
    const [moves, setMoves] = useState(0)
    const [playsHistory, setPlaysHistory] = useState([{
        history: {
          squares: Array(9).fill(null)
        },
        xIsNext: true
      }])

    const determineWinner = (squares) => {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
        }
    }
    return null;
    }  

    const handleClick = (i) => {
        const squares = clickedSquares.slice()
        squares[i] = xIsNext ? 'X' : 'O';
        // console.log(xIsNext)
        setXIsNext(!xIsNext)
        // console.log(xIsNext)

        let current = playsHistory
        current ={
            history:{
                squares: squares},
            xIsNext: !xIsNext     
        }
        // console.log(current)
        setClickedSquares(squares)
        setMoves(prevMoves => prevMoves + 1)
        setPlaysHistory(prevPlays => ([...prevPlays, current]))
        console.log(playsHistory)
        if (determineWinner(squares) || squares[i]) return
    }
    
    let winner =  determineWinner(clickedSquares)
    let status = winner ? `Winner: ${winner}` : `Next player: ${xIsNext ? 'X' : 'O'}`
    if(!winner && moves === 9) status = 'Draw'
 
      return (
        <div className="game">
          <div className="game-board">
            <Board
              squares={clickedSquares}
              onClick={(i) => handleClick(i)}
            />
          </div>
          <div className="game-info">
            <div>{status}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      );
  }

export default Game;

Now, I'm receiving TypeError:Cannot read property '0' of undefined error at this point of Board component:

   7 | const renderSquare = (i) => {
   8 |   return (
   9 |  <Square
> 10 |    value={props.squares[i]}
     | ^  11 |    onClick={() => props.onClick(i)}
  12 |  />
  13 |   );

If I set the same code in a single.jsx file, it works well. I already removed the [i] from props.squares at line 10, however a new error occours TypeError: props.onClick is not a function . I think Board.jsx file doesn't recognizes the parameters I'm passing from Game.jsx file. How should I componentize my project in different files and keep it working?

Answer 1

You have to be very careful while separating the components. Check out this CodeSandbox link. I haven't done any changes in your logic. There is a scope for code improvement but that wasn't in the requirements so I have just separated your file into individual components file.