Question

我试图制作一堆var arr = []; for (i = 0; i<10; i++) { arr.push(i); } class List extends React.Component{ render() { var longlist = ""; arr.forEach(function(item,index){ longlist += '<div>' + item + '</div>'; }); return (<div>{longlist}</div>); } }（玩无限滚动）。我试图这样做：

<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>

我得到以下输出：

divs

我该怎么做才能渲染1 2 3 ...而不是字符串？也就是说，输出看起来像这样：

 public static int[] removeduplicate(int a[])
 {
    int count=0;
    for(int i=0;i<a.length;i++)
    {
         for(int j=i+1;j<a.length;j++)
         {
            if(a[i]==a[j])
            {
              a[j]=-1;
              count++;
            }
         }
     }
      int b[]=new int[a.length-count];
      for(int i=0;i<a.length;i++)
      {
            if(a[i]!=-1)
          {
              for(int j=0;j<(a.length-count);j++)
              {
                   b[j]=a[i];
              }
          }
     }
      return b;
 }

Answer 1

使用.map()和简单的JSX返回所需的div。

class List extends React.Component{

  render() {

    var renderedOutput = arr.map(item => <div> {item} </div>)

    return (
      <div>
        {renderedOutput}
      </div>
    );
  }
}

Answer 2

另一种方式你也可以这样做

class DivList extends React.Component {
      
      constructor(props) {
        super(props);
      }
              
displayForm() { 

 let divs = [];
  for(let i = 0; i < 10; i++) {
       divs.push (<div key={i} >{i}</div>)
   }
   return divs;
}
              
  render() { return (  <div>{this.displayForm()} </div> ); }
}
ReactDOM.render(<DivList />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

通过数组创建一堆div

2 个答案: