Блог

Я новичок в reactjs, и у меня возникла эта проблема в моем функциональном компоненте Square, который является дочерним элементом компонента Board класса Board. Это из официального руководства по reactjs по началу работы. Когда я запускаю свой код, я получаю эту ошибку: 'render' is not defined no-undef

Родительский компонент может передавать состояние обратно дочерним компонентам с помощью props Это позволяет синхронизировать дочерние компоненты друг с другом и с родительским компонентом При изменении состояния платы квадратные компоненты автоматически повторно отображают (например, handleClick)

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

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

class Board extends React.Component {
    // Constructor to keep track of Board's state
    // The parent component can pass the state back down to the children by using props
    // This keeps the child components in sync with each other and with the parent component
    // When the Board’s state changes, the Square components re-render automatically (e.g handleClick)
    constructor(props) {
        super(props);
        this.state = {
          squares: Array(9).fill(null),
          xIsNext: true,
        };
    }

    handleClick(i) {
        const squares = this.state.squares.slice(); // Create copy of squares array with slice
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            squares: squares,
            xIsNext: !this.state.xIsNext,
        });
    }

    renderSquare(i) {
        return (<Square value={this.state.squares[i]}
                        onClick={() => this.handleClick(i)} />);
    }

    render() {
        const status = 'Next player: X';

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

class Game extends React.Component {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
    <Game />,
    document.getElementById('root')
);
  

 // function component
function Square(props) {
    // Change from "render" to "return" in the function component
    // render (
    return (
        <button className="square" onClick={props.onClick}>
            {props.value}
        </button>
    );
}