Reactjs 错误：'render' 未定义 no-undef

Question

我是 reactjs 新手，在我的函数组件 Square 中遇到了这个问题，它是 Board 类组件 Board 的子组件。这是来自官方的 reactjs 入门教程。当我运行我的代码时，我得到这个错误：'render' is not defined no-undef

父组件可以使用 props 将状态向下传递给子组件 这使子组件彼此同步并与父组件保持同步 当 Board 的状态发生变化时，Square 组件会自动重新渲染（例如 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')
);

Answer 1

// 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>
    );
}