Question

我一直在尝试，但是DOM中没有呈现任何内容。这是什么把戏？

recurse(i, arr) {
    if (!i) {
        i = 0;
        arr = [];
    }

    if (i >= 4) {
        return arr;
    }

    arr.push(<div key={i}>hello world</div>);

    this.recurse(i + 1, arr);
}

render() {
    let styles = { height: '100vh', overflow: 'hidden' };

    return <div style={styles}>{this.recurse()}</div>;
}

Answer 1

您缺少递归调用中的返回值：

recurse(i, arr) {
    if (!i) {
        i = 0;
        arr = [];
    }

    if (i >= 4) {
        return arr;
    }

    arr.push(<div key={i}>hello world</div>);

    return this.recurse(i + 1, arr);
}

render() {
    let styles = { height: '100vh', overflow: 'hidden' };

    return <div style={styles}>{this.recurse()}</div>;
}

编辑：如果您希望将每个 div 递归呈现为子代，则您的递归函数看起来会有些不同：

recurse(i) {
    if (!i) {
        i = 0;
    }

    if (i >= 4) {
        return;
    }

    return <div  key={i}>hello world{this.recurse(++i)}</div>;
}

递归生成反应元素的正确方法是什么？

1 个答案: