我正在尝试重写Board以使用两个循环来制作正方形,而不是对其进行硬编码.我试图将这些jsx片段连接起来,我不能像它们是字符串那样仅仅附加它们.任何见识或帮助将不胜感激.先感谢您
这是我尝试的第一段代码,它给了我一个Object是无效的React子错误.
class Board extends React.Component {
renderSquare(i) {
return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i) } />;
}
render() {
let board = null;
for(var i = 0; i < 9; i+=3)
{
let row = <div className="board-row">{this.renderSquare(i)}{this.renderSquare(i+1)}{this.renderSquare(i+2)}}</div>
board = <div>{{board}}{{row}}</div>;
}
return (
<div>
{board}
</div>
);
}
}function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
class Board extends React.Component {
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
return (
<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>
);
}
}最佳答案
JSX转换为React.createElement(…)函数调用.这些返回对象,而不是字符串,因此无法将它们连接起来.
原文链接：https://www.f2er.com/js/531218.html只需创建一个元素数组：
render() {
const rows = [];
for(var i = 0; i < 9; i+=3)
{
rows.push(
<div key={i} className="board-row">
{this.renderSquare(i)}
{this.renderSquare(i+1)}
{this.renderSquare(i+2)}}
</div>
);
}
return (
<div>
{rows}
</div>
);
}
it gives me a Object is an invalid React child error.
在
board = <div>{{board}}{{row}}</div>;
{board}是{board：board}的对象文字简写. {row}也一样.所以这真的是
board = <div>{{board: board}}{{row: row}}</div>;
正如React告诉你的那样,它不知道如何渲染任意对象.
也许你想要
board = <div>{board}{row}</div>;
相反(board和row毕竟是React元素,所以可以用),但这不会产生所需的元素结构.
