Javascript 将元素列表合并到react中的一个表行

我还没有反应过来

我有一个

MonthEntry

组件，其中包含

MonthPlanEntry

的一个或多个实例列表。我想将列表中的所有

monthplan条目

显示为一个表行

class MonthPlanEntry extends React.Component {
    constructor(remaining_loan, interest, loan_reduce) {
        this.remaining_loan = remaining_loan;
        this.interest = interest;
        this.loan_reduce = loan_reduce;
    }
}

class MonthEntry extends React.Component {
    constructor(plans) {
        this.plans = plans;
    }

    render() {
        return (
            <tr>
                this.plans.map((plan, key) => {
                    <td>{plan.remaining_loan}</td>
                    <td>{plan.interest}</td>
                    <td>{plan.loan_reduce}</td>
                });
            </tr>
        );
    }
}

class MonthPlanEntry扩展了React.Component{
建造商（剩余贷款、利息、贷款减少）{
此。剩余贷款=剩余贷款；
这个。利息=利息；
this.loan\u reduce=loan\u reduce；
}
}
类MonthEntry扩展了React.Component{
建造师（图则）{
这个。计划=计划；
}
render（）{
返回(
this.plans.map（（计划，键）=>{
{剩余贷款计划}
{计划利益}
{计划.贷款减少}
});
);
}
}

问题是，每次尝试对列表执行操作时，都会出现一个错误：

JSX表达式必须有一个父元素。ts（2657）

编辑：

---

为了澄清-我希望

MonthEntry

返回一个由多个

MonthPlanEntry

组成的

。每个

MonthPlanEntry

将向行中添加3个

s。

用

React.Fragment

包装

td

标签，并将整个组件包装在

tr

    return (
        <tr>
            {this.plans.map((plan, key) => {
                <React.Fragment>
                   <td>{plan.remaining_loan}</td>
                   <td>{plan.interest}</td>
                   <td>{plan.loan_reduce}</td>
                </React.Fragment>
            });}
        </tr>
    );

返回(
{this.plans.map（（plan，key）=>{
{剩余贷款计划}
{计划利益}
{计划.贷款减少}
});}
);

非常有用！虽然你的意思可能不是，我会补充。多亏了你的指针，我才找到这个。这正是我正在描述的情况。