#reactjs
#reactjs
Вопрос:
Я новичок в 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')
);
Ответ №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>
);
}