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>

在这两种情况下，您都会理解需要将props传递给子元素，并让子元素决定它想要渲染的内容。

如果你想要输出像这样..

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

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

如何反应附加div * num？

2 个答案: