jsx就是高级点的HTML拼接,javascript-将JSX片段与HTML串联,然后呈现累积的结果

我正在尝试重写Board以使用两个循环来制作正方形,而不是对其进行硬编码.我试图将这些jsx片段连接起来,我不能像它们是字符串那样仅仅附加它们.任何见识或帮助将不胜感激.先感谢您

这是我尝试的第一段代码,它给了我一个Object是无效的React子错误.

class Board extends React.Component {

renderSquare(i) {

return this.props.onClick(i) } />;

}

render() {

let board = null;

for(var i = 0; i < 9; i+=3)

{

let row =

{this.renderSquare(i)}{this.renderSquare(i+1)}{this.renderSquare(i+2)}}

board =

{{board}}{{row}}

;

}

return (

{board}

);

}

}

function Square(props) {

return (

{props.value}

);

}

class Board extends React.Component {

renderSquare(i) {

return (

value={this.props.squares[i]}

onClick={() => this.props.onClick(i)}

/>

);

}

render() {

return (

{this.renderSquare(0)}

{this.renderSquare(1)}

{this.renderSquare(2)}

{this.renderSquare(3)}

{this.renderSquare(4)}

{this.renderSquare(5)}

{this.renderSquare(6)}

{this.renderSquare(7)}

{this.renderSquare(8)}

);

}

}

最佳答案

JSX转换为React.createElement(…)函数调用.这些返回对象,而不是字符串,因此无法将它们连接起来.

只需创建一个元素数组：

render() {

const rows = [];

for(var i = 0; i < 9; i+=3)

{

rows.push(

{this.renderSquare(i)}

{this.renderSquare(i+1)}

{this.renderSquare(i+2)}}

);

}

return (

{rows}

);

}

it gives me a Object is an invalid React child error.

在

board =

{{board}}{{row}}

;

{board}是{board：board}的对象文字简写. {row}也一样.所以这真的是

board =

{{board: board}}{{row: row}}

;

正如React告诉你的那样,它不知道如何渲染任意对象.

也许你想要

board =

{board}{row}

;

相反(board和row毕竟是React元素,所以可以用),但这不会产生所需的元素结构.

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！