Question

我尝试渲染10次，但它会产生某种错误，这是通常在这里解释的方法。我有新的反应，问题似乎是基本的，所以如果可以，请回答。感谢

loop = () => {
    for (let i = 0; i<10;i++) {
        return <UI title = "Default Title" discription = "the discription for this website is null init!" />;
    }
}

render(){
    return(
        <div>
            {this.loop}
        </div>
    );
}

Answer 1

loop() {
    const result = [];
    for (let i = 0; i<10;i++) {
        result.push(<UI title = "Default Title" discription = "the discription for this website is null init!" />);
    }
    return result;
}

render(){
    return(
        <div>
            {this.loop()}
        </div>
    );
}

Answer 2

这是一个尝试的策略...向数组添加元素（在此代码中为'square'），然后渲染该数组。在这种情况下，它是50个方格，但同样的想法。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  render() {
    var squares = [];
    for(let i = 0; i< 50; i++){
      squares.push(<div className='square'>{i}</div>);
    }
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          I am coding!!
        </p>
        {squares}

      </div>
    );
  }
}

export default App;

不能循环组件

2 个答案: