Javascript React-创建带有循环的嵌套组件
我对React有点意见。我无法创建带有for循环的嵌套组件。我要做的是创建一个表的9个单元格，然后创建3行，每行3个单元格，然后将这3行安装在一起，创建一个板9x9 假设我想得到这样的东西，但是使用循环Javascript React-创建带有循环的嵌套组件,javascript,loops,reactjs,inline,jsx,Javascript,Loops,Reactjs,Inline,Jsx,我对React有点意见。我无法创建带有for循环的嵌套组件。我要做的是创建一个表的9个单元格，然后创建3行，每行3个单元格，然后将这3行安装在一起，创建一个板9x9 假设我想得到这样的东西，但是使用循环 class Board extends React.Component { renderSquare(i) { return <Square value={this.props.squares[i]} onClick={() => this.props.onClic
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>
);
}
类板扩展React.Component{
renderSquare（一）{
返回这个.props.onClick（i）}/>；
}
render（）{
返回(
{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）}
);
}
class Board extends React.Component {
renderSquare(i) {
return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}
createCells(i){
if(i%3){return;}
var index = this.fillN(Array(i)); //index=[0,1,2,3,4,5,6,7,8]
var cells = [];
index.forEach(function(i){
cells.push(() => {
return(
<div>
{this.renderSquare(i)}
</div>
);
});
});
return cells;
}
createRows(cells){
var index = this.fillMod3(Array(3)); //index=[0,3,6]
var rows = []
index.forEach(function(i){
rows.push(() => {
return(
<div>
{cells[i]}
{cells[i+1]}
{cells[i+2]}
</div>
);
});
});
return rows;
}
render(){
var cells = this.createCells(9);
var rows = this.createRows(cells);
var board = [];
var index = this.fillN(Array(1));
index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
return(
<div>
{board[0]}
</div>
);
}
类板扩展React.Component{
renderSquare（一）{
返回这个.props.onClick（i）}/>；
}
createCells（i）{
如果（i%3）{return；}
var index=this.fillN（数组（i））；//index=[0,1,2,3,4,5,6,7,8]
var单元格=[]；
索引.forEach（函数（i）{
单元格。推送（（）=>{
返回(
{this.renderSquare（i）}
);
});
});
返回单元；
}
创建行（单元格）{
var index=this.fillMod3（数组（3））；//index=[0,3,6]
变量行=[]
索引.forEach（函数（i）{
行。推送（（）=>{
返回(
{cells[i]}
{cells[i+1]}
{细胞[i+2]}
);
});
});
返回行；
}
render（）{
var cells=this.createCells（9）；
var rows=this.createRows（单元格）；
var board=[]；
var index=this.fillN（数组（1））；
index.forEach（函数（行）{
板。推送（（）=>{
返回(
{row}
);
});
})
返回(
{board[0]}
);
}
<Board>
<div> /*empty*/ </div>
</Board>
render() {
return (
<div>
{this.createSquares()}
</div>
);
}
/*空*/
render(){
var index1 = this.fillN(Array(3)); //index1=[0,1,2]
var index2 = this.fillN(Array(3)); //index2=[0,1,2]
return(
<div>
{index1.map((e1,i1) => {
return(
<div key={i1} className="board-row">
{index2.map((e2, i2) => {
return(
<p key={i2+10}>
{this.renderSquare(i2)}
</p>
)
})}
</div>
)
})}
</div>
);
}
render（）{
var index1=this.fillN（数组（3））；//index1=[0,1,2]
var index2=this.fillN（数组（3））；//index2=[0,1,2]
返回(
{index1.map（（e1，i1）=>{
返回(
{index2.map（（e2，i2）=>{
返回(
{this.renderSquare（i2）}
)
})}
)
})}
);
}
<Board
onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
/>
render() {
return <div>
{
[1,2,3].map ( (n) => {
return this.renderSquare(n)
})
}
</div>;
}
this.handleClick（i）}//handleClick只是在单元格中画一个X
/>
render(){
var index1 = this.fillMod3(Array(3));
return(
<div>
{index1.map((e,i) => {
return(
<div key={i} className="board-row">
{this.renderSquare(e)}
{this.renderSquare(e+1)}
{this.renderSquare(e+2)}
</div>
)
})}
</div>
);
}
render() {
const rows = [];
for(let i = 0; i<9; i=i+3) {
const oneRow = [];
for(let j = i; j < i+3; j++) {
oneRow.push(this.renderSquare(j, j))
}
rows.push(<div className="board-row" key={i + 'someId'}>{oneRow}</div>)
}
return (
<div>
{rows}
</div>
);
}
import React from 'react';
import Square from './Square';
export default
class Board extends React.Component {
render() {
const board2 = [];
for (let i = 0; i < 3; i++) {
const s = [];
for (let k = 0; k < 3; k++) {
s[k] = <Square
key ={3*i+k}
value ={this.props.squares[3*i+k]}
onClick ={()=>this.props.onClick(3*i+k)}
/>;
}
board2[i] = <div className="board-row" key={i}>{s}</div>;
}
///////////////////////////////////////
return (
<div>{board2}</div>
);
}
}
import React from 'react';
import Square from './Square';
export default
class Board extends React.Component {
render() {
let board =Array(3).fill(null);
let square =Array(3).fill(null);
const x = board.map((b,bIndex)=>{
return<div className="board-row" key={bIndex}>
{
square.map((s, sIndex)=>{
return <Square
key ={3*bIndex+sIndex}
value ={this.props.squares[3*bIndex+sIndex]}
onClick ={()=>this.props.onClick(3*bIndex+sIndex)}
/>;
})
}
</div>;
});
///////////////////////////////////////
return (
<div>{x}</div>
);
}
}
render（）{
var index1=this.fillMod3（数组（3））；
返回(
{index1.map（（e，i）=>{
返回(
{this.renderSquare（e）}
{this.renderSquare（e+1）}
{this.renderSquare（e+2）}
)
})}
);
}
但这不是我想要的。我想要另一个循环，甚至是intern renderSquare（I）函数。要在JSX中呈现元素列表，可以执行以下操作：
<Board
onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
/>
render() {
return <div>
{
[1,2,3].map ( (n) => {
return this.renderSquare(n)
})
}
</div>;
}
键index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
编辑我用你的代码作为基础创建了一个9x9板的小提琴：（你可以点击单元格选择它）你正在将函数推到
板{board[0]()}
我准备了一个例子来说明你的问题：我看到你也在做JS React教程！我是这么做的，但我正在做，因为必须有一个好的方法来给出每个单独的键 我遇到了你遇到的同一个问题，X被画成3个正方形，发生这种情况的原因是，当你渲染正方形时，一些“I”被复制了。例如，有多个“I”为2的正方形（至少在我的问题中是这样） 所以每个正方形都有一个右索引？[0,1,2,3,4,5,6,7,8] 首先，我们需要找到它们之间的关系，我们可以将它们渲染成行！因此，在您的示例中，您有index1和index2，我假设它们将引用板中正方形的x和y坐标。重新编写上面的数组，我们得到：[{0,0}，{1,0}，{2,0}，{0,1}，{1,1}，{2,1}，{0,2}，{2,2}]，使用{x，y}格式。我们如何使用这些值（我们将从index1和index2中获得这些值，以获得我们从[0,1,2,3,4,5,6,7,8]开始的原始值数组） 我所做的是3*x+y（或者在一个循环中，3*I+j）。这样每个正方形都是ha
render() {
const rows = [];
for(let i = 0; i<9; i=i+3) {
const oneRow = [];
for(let j = i; j < i+3; j++) {
oneRow.push(this.renderSquare(j, j))
}
rows.push(<div className="board-row" key={i + 'someId'}>{oneRow}</div>)
}
return (
<div>
{rows}
</div>
);
}
renderSquare(i, key) {
return (
<Square
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
key={key}
/>
);
}
class Board extends React.Component {
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
key={i}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
var self = this;
return (
<div>
// you can use: [...Array(3)] instead of [1,2,3]
{[1, 2, 3].map(function(row, rowIdx) { // create rows
return (
<div className="board-row" key={rowIdx}>
{
// you can use: [...Array(3)] instead of [1,2,3]
[1, 2, 3].map((col, colIdx) => { // create columns
return self.renderSquare((3 * rowIdx) + colIdx); // calculate square index
})
}
</div>
);
})}
</div>
);
}
}
render() {
let count = 0;
const index = [1, 2, 3];
return (
<div>
{index.map((v, i) => {
return (
<div key={i} className="board-row">
{index.map((v2, i2) => {
return this.renderSquare(count++);
})}
</div>
);
})}
</div>
);
}
import React from 'react';
import Square from './Square';
export default
class Board extends React.Component {
render() {
const board2 = [];
for (let i = 0; i < 3; i++) {
const s = [];
for (let k = 0; k < 3; k++) {
s[k] = <Square
key ={3*i+k}
value ={this.props.squares[3*i+k]}
onClick ={()=>this.props.onClick(3*i+k)}
/>;
}
board2[i] = <div className="board-row" key={i}>{s}</div>;
}
///////////////////////////////////////
return (
<div>{board2}</div>
);
}
}
import React from 'react';
import Square from './Square';
export default
class Board extends React.Component {
render() {
let board =Array(3).fill(null);
let square =Array(3).fill(null);
const x = board.map((b,bIndex)=>{
return<div className="board-row" key={bIndex}>
{
square.map((s, sIndex)=>{
return <Square
key ={3*bIndex+sIndex}
value ={this.props.squares[3*bIndex+sIndex]}
onClick ={()=>this.props.onClick(3*bIndex+sIndex)}
/>;
})
}
</div>;
});
///////////////////////////////////////
return (
<div>{x}</div>
);
}
}
import React from 'react';
export default
function Square(props) {
console.log('square render')
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
return (
<div>
{[0,1,2].map(i => {
return (
<div className="board-row">
{[0,1,2].map(j => {
return this.renderSquare(3*i + j)
})}
</div>
);
})}
</div>
);
class Board extends React.Component {
renderSquare(i) {
return (<Square key={i} value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />);
}
render() {
let board = [];
for(let x = 0; x<3; x++){
let lis =[];
for(let y = 0; y<3; y++){
lis.push(this.renderSquare(3*x + y));
}
board.push(<div key={x}>{lis}</div>)
}
return (
<div>
{board}
</div>
);
}
}
class Board extends React.Component {
//range is a Sequence generator function
//Array.from(arrayLike[, mapFn [, thisArg]]).
//arrayLike - An array-like or iterable object to convert to an array
//mapFn - Map function to call on every element of the array
//thisArg - Value to use as this when executing mapFn
//range(0, 4, 1); => [0, 1, 2, 3, 4]
range = (start, stop, step) => Array.from(
{ length: (stop - start)/step +1 },
(_, i) => start + (i * step)
);
renderSquare(i) {
return <Square
key={i}
value={this.props.squares[i]}
onClickChange={() => this.props.onClickChange(i)}
/>;
}
render() {
let row = 3;
let col = 3;
return (
<div>
{
//This generates an Array of [0, 3, 6] if row = 3 and col = 3
// n is the element and i is the index of the element, i starts at 0
this.range(0, row * col - 1, col).map( (n, i) => {
return (
<div key={i} className="board-row">
{
this.range(n, (i + 1) * col - 1, 1).map( (n, i) => {
return this.renderSquare(n)
})
}
</div>
)
})
}
</div>
);
}
class Board extends React.Component {
constructor(props) {
super(props);
this.rows = Array(3).fill(null);
}
renderSquare(i) {
return (<Square
key={i}
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>);
}
renderRow(row) {
return (
<div key={row} className="board-row">
{this.rows.map((x, col) => this.renderSquare(3*row+col))}
</div>
);
}
render() {
return (
<div>
{this.rows.map((x, rowIndex) => this.renderRow(rowIndex))}
</div>
);
}
}
renderSquare(i) {
return (
<Square
key={i}
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
let rows = [];
for (let i = 0; i <= 2; i++) {
let children = []
for (let j = i * 3; j <= i * 3 + 2; j++) {
children.push(this.renderSquare(j))
}
rows.push(
<div key={i} className="board-row">
{children}
</div>
)
}
return (
<div>
{rows}
</div>
);
}