目標：我想在每 8個<Square />元素之后渲染 64 個元素<br/>
問題：腳本只輸出一個塊，然后停止，沒有任何反應。
源代碼：
import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
class Square extends React.Component {
render() {
return <div id="block"></div>;
}
}
class Board extends React.Component {
renderSquare() {
for (let i = 1; i <= 64; i ) {
if (i % 8 == 0) {
return <br />;
} else {
return <Square />;
}
}
}
render() {
return <div>{this.renderSquare()}</div>;
}
}
function Game() {
return (
<div id="board">
<Board />
</div>
);
}
ReactDOM.render(<Game />, document.getElementById('root'));
uj5u.com熱心網友回復：
使用 return 陳述句將在第一次匹配后退出函式，因此在第一個回圈中它退出并僅顯示第一個元素，您需要使用陣列，將元素存盤在其中，然后回傳陣列。
將您的方法更改renderSquare為以下
renderSquare() {
const items = [];
for (let i = 1; i <= 64; i ) {
if (i % 8 === 0) {
items.push(<br />);
} else {
items.push(<Square />);
}
}
return items;
}
更新
如果要列印 64 次，請使用以下命令
renderSquare() {
const items = [];
for (let i = 1; i <= 64; i ) {
items.push(<Square />);
if (i % 8 === 0) {
items.push(<br />);
}
}
return items;
}
檢查這個https://codesandbox.io/s/peaceful-brattain-pj32le?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/456295.html
標籤：javascript 反应
上一篇：將物件陣列傳遞給另一個類