如何反应append div * num？

Question

class AddForm extends Component { 
    render() { 
     return (
      <div> 
       asd 
      </div> 
     ); 
    } 
} 

let addComponents = (num) => { 
    let i; 
    for(i = 0; i < num; i++) { 
     return (<AddForm />); 
    } 
} 

<div className="add">{ addComponents(this.state.addNum) }</div> 

我想追加ASD * NUM 但ASD只有一个

this.state.addNum = 1

如何反应追加ASD * NUM？

对不起，我是坏的英语

Answer 1

你的函数返回addComponent单个组件，而它实际上应该返回组件的数组。

const addComponents = (num) => { 
    let arr = []; 
    for(let i = 0; i < num; i++) { 
     arr.push(<AddForm />); 
    } 
    return arr; 
} 

Answer 2

我希望你想要的输出是这样的.. 如果num = 3，那么输出应该是 “ASD ASD ASD”

该代码，这将是：

class AddForm extends Component { 
    render() { 
    var str = "asd "; 
    for(var i=1; i<this.props.num; i++) { 
     str = str+ "asd "; 
    } 
    return (
     <div> 
      {str} 
     </div> 
    ); 
    } 
} 

let addComponents = (num) => { 
    return (<AddForm num={num} />); 
} 

<div className="add">{ addComponents(this.state.addNum) }</div> 

如果你正在寻找一个输出这样的事情。（ASD * 3）如果num = 3，那么使用下面的代码..

class AddForm extends Component { 
    render() { 
    return (
     <div> 
      asd * {this.props.num} 
     </div> 
    ); 
    } 
} 

let addComponents = (num) => { 
    return (<AddForm num={num} />); 
} 

<div className="add">{ addComponents(this.state.addNum) }</div> 

在这两种情况下，您都会明白需要将道具传递给子元素，并让子元素决定要渲染的内容。

如果你想输出是这样的..

<div>asd</div> 
<div>asd</div> 
<div>asd</div> 

然后通过OB3上面贴的答案是正确的。