时间戳

首页 > 解决方案 > React - 渲染组件数组中的问题

javascript - React - 渲染组件数组中的问题

问题描述

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 个组件。但什么也没显示。有人可以向我解释为什么这样的关系在 React 中不起作用吗？这里使用的错误做法是什么？

标签： javascriptreactjsjsx

解决方案

  1. i在 for 循环中初始化0-i = 0
  2. 将圆圈推入行中 -circlesrow.push(<Circle />)
  3. 调用函数 -{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>

推荐阅读