Question

我是React的新手。有人可以告诉我，为什么会这样：

render() {
        return (
            <div>
                <h1>Hello, React!</h1>
                {this._persons.map( function (p, i) {
                    return <Person name={p.name} age={p.age} />
                })}
            </div>
        )
    }

但这不是：

getPersons() {
        this._persons.map(function (p, i) {
            console.log(i);
            return <Person name={p.name} age={p.age} />
        });
    }

    render() {
        return (
            <div>
                <h1>Hello, React!</h1>
                {this.getPersons()}
            </div>
        )
    }

map函数是绝对使用的，因为我从log函数中获取结果，但Person组件不会是rendert。

Answer 1

你永远不会从getPersons返回任何内容。因此没有什么可以呈现的。您只需将通话结果返回map：

即可

getPersons() {
  return this._persons.map(function (p, i) {
    console.log(i);
    return <Person name={p.name} age={p.age} />;
  }
}

Answer 2

您需要返回getPersons函数的结果。

Answer 3

您的getPersons()方法只返回任何内容。

getPersons() {
    return this._persons.map(function (p, i) {
        console.log(i);
        return <Person name={p.name} age={p.age} />
    });
}

反应对象迭代

3 个答案: