英文:
Inline conditional JSX - Expected corresponding JSX closing tag for <div>
问题
Here is the translated code without the non-translatable parts:
const gridSquares = squares.map((reference, square) => {
return (
<React.Fragment>
{square % 3 === 0 && square % 3 !== squares.length && (
<div className="board-row">
)}
<Square
key={square}
value={squares[square]}
onSquareClick={() => handleClick(square)}
/>
</React.Fragment>
);
});
return (
<div>
<div className="status">{status}</div>
{gridSquares}
</div>
);
It seems like there is a syntax error in your code related to the closing tags, which I have translated without changing. You may need to inspect your code for the specific error.
英文:
Is it possible to have inline conditional jsx without the closing tag? I need to insert <div className="board-row"> every 3rd square.
const gridSquares = squares.map((reference, square) => {
return (
<React.Fragment>
{square % 3 == 0 && square % 3 !== squares.length && (
<div className="board-row">
)}
<Square
key={square}
value={squares[square]}
onSquareClick={() => handleClick(square)}
/>
</React.Fragment>
);
});
return (
<div>
<div className="status">{status}</div>
{gridSquares}
</div>
);
Error:
./src/App.js
Syntax error: C:/Code/Tutorial/src/App.js: Expected corresponding JSX closing tag for <div> (57:4)
55 | <Square key={square} value={squares[square]} onSquareClick={() => handleClick(square)} />
56 |
> 57 | </React.Fragment>
| ^
58 |
59 | });
答案1
得分: 1
JSX不像HTML模板。每个元素都会被编译为JS，并且必须在结构上有效。
假设你想要创建一个每行有3个元素的网格，你可以使用CSS grid来简化，而不必担心标记。
return (
<div>
<div className="status">{status}</div>
<div className="board-grid">
{squares.map((square, index) => (
<Square
key={index}
value={square}
onSquareClick={() => handleClick(square)}
/>
))}
</div>
</div>
);
.board-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 每行3个方块 */
}
英文:
JSX isn't like an HTML template. Each element is compiled to JS and must be structurally valid.
Assuming you're trying to make some sort of grid with 3 elements per row, you could use a CSS grid for simplicity without worrying about markup
return (
<div>
<div className="status">{status}</div>
<div className="board-grid">
{squares.map((square, index) => (
<Square
key={index}
value={square}
onSquareClick={() => handleClick(square)}
/>
))}
</div>
</div>
);
.board-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 squares per row */
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论