React - 渲染组件数组的问题

Question

function Circle(props) {
  return(<span className='Circle'>this a circle</span>)
}

class Lottery extends React.Component{
  constructor(props){
    super(props);
    this.state = {};
  }

  render(){
    let circles = () => {
      let circlesrow = [];
      for (let i;i < this.props.n;i++) {
        circles.push(<Circle/>)
      }
      return (circlesrow);
    }
    return(
      <div>
        <div>
          {circles()}
        </div>
      </div>
    );
  }
}


function App() {
  return (
    <div className="App">
      <Lottery n={9}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

我想在彩票中插入 9 个组件 components.but 没有任何显示。有人可以向我解释为什么这样的关系在 React 中不起作用吗？这里使用的错误做法是什么？

Answer 1

您需要 push 进入 circlesrow 数组（而不是 circles 函数）。然后，调用 circles() 函数。

render(){
  let circles = () => {
    let circlesrow = [];
    for (let i = 0;i < this.props.n;i++) {
      circlesrow.push(<Circle/>)
    }
    return (circlesrow);
  }
  return(
    <div>
      <div>
        {circles()}
      </div>
    </div>
  );
}

Answer 2

在for循环中使用0初始化i - i = 0
将圆圈推入行中 - circlesrow.push(<Circle />)
调用函数 - {circles()}

function Circle(props) {
  return(<span className='Circle'>this a circle</span>)
}

class Lottery extends React.Component{
  state = {};

  render(){
    const circles = () => {
      const circlesrow = [];
      
      for (let i = 0; i < this.props.n; i++) {
        circlesrow.push(<Circle />)
      }
      
      return circlesrow;
    }
    
    return(
      <div>
        <div>
          {circles()}
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <Lottery n={9}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

你也可以直接用Array.from()生成圆数组：

function Circle(props) {
  return(<span className='Circle'>this a circle</span>)
}

class Lottery extends React.Component{
  state = {};

  render(){   
    const { n } = this.props;
    
    return(
      <div>
        <div>
          {Array.from({ length: n }, (_, i) => <Circle key={i} />)}
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <Lottery n={9}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

React - 渲染组件数组的问题

React - problem in rendering array of components

javascript

jsx

reactjs