Javascript 在react中渲染对象数组

我是新的反应，所以我不确定这里出了什么问题。。。 我正在尝试创建一个3x3结构的输入框。这就是我想到的

function Square(prop){
    return (<input type = 'text' class='w-25'  style="display:inline-block">${prop.key}</input>);
}

function Row(props){
    const row =[];
    for( let i=props.key*3;i<(props.key+3);i++){
        row.push(<Square key ={i}/>);
    }
    return (row);
}

class Box extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,
        };
    }
    render(){
        let board =[];
        for( let i=0; i<3;i++){
            board.push(<div><Row key={i} /></div>);
        } 
        return (board);
    }
} 
ReactDOM.render(
    <Box />,
    document.getElementById('root')
  );

功能方块（道具）{
返回（${prop.key}）；
}
功能行（道具）{
常量行=[]；
对于（让i=props.key*3；i这里您需要移动属性：

board.push(<div key={i}><Row /></div>);

board.push（）；

因为
键
应该在数组中每个元素的外部元素中
这里需要移动属性：

board.push(<div key={i}><Row /></div>);

board.push（）；

因为
key
应该位于数组中每个元素的外部元素中
，所以您应该在父元素中使用key，即在您的示例中使用
div
：

for( let i=0; i<3;i++){
  board.push(<div key={i}><Row /></div>);
}

for（设i=0；i您应该在父元素中使用键ie.
div
，在您的示例中：

for( let i=0; i<3;i++){
  board.push(<div key={i}><Row /></div>);
}

for（设i=0；i关键道具应位于迭代的第一个元素上，即
div
元素：

board.push(<div key={i}><Row /></div>);

board.push（）；

还要注意，这一行
for（让i=props.key*3；i键prop应该位于迭代的第一个元素上，即
div
元素：

board.push(<div key={i}><Row /></div>);

board.push（）；

还要注意，此行
for（让i=props.key*3；i
for（让i=props.key*3；i
for（设i=props.key*3；i为K，但现在我得到的是一行4个输入框。请注意，为什么我在循环中只指定了3个输入框却得到了4个。还有一行？？？显然，我第一行有3个输入框，第二行有1个输入框row@AkshayKishore，我在我的答案中添加了一个编辑部分。@AkshayKishore，没关系，不用担心。祝你好运nd:）谢谢，但现在我得到了一行4个输入框。请注意，为什么我在循环中只指定了3个，却得到了4个。也是一行？？？显然，我第一行有3个输入框，第二行有1个输入框row@AkshayKishore，我在答案中添加了一个编辑部分。@AkshayKishore，没关系，不用担心。祝你好运朋友：）
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Square(props) {
  return (<input type='text' id={props.key} value={props.value}></input>);
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }
  render() {
    let board = [];
    for (let i = 0; i < 3; i++) {
      const key = `${i}row`;
      board.push(<Square key={key} value={i} />);
      console.log(i)
    }
    return (board);
  }
}
ReactDOM.render(
  <Box />,
  document.getElementById('root')
);