使用typescript呈现输出html格式的Reactjs

为什么以下渲染会导致问题。我只是想输出两行相同的数据。它编译得很好，但在我的输出中，两行tbody数据与第一列（make）对齐，其余的标题与两行tbody数据的右侧对齐。我只是简化了要测试的代码，但最终我想要的是第二行，每个列都有一个输入字段。输入字段将允许我更改相应的单元格值

我还得到：

warning.js:35 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>. See CarTool > tbody > div. 

warning.js:35 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See CarTool > div > tr.

public render() {
        return <div>
            <h1>Car Tool</h1>
            <table>
                <thead>
                    <tr>
                        <td>Make</td>
                        <td>Model</td>
                        <td>Year</td>
                        <td>Color</td>
                        <td>Price</td>
                    </tr>
                </thead>
                <tbody>
                    {this.props.cars.map((car) =>
                        <div>
                            <tr>
                                <td>{car.make}</td>
                                <td>{car.model}</td>
                                <td>{car.year}</td>
                                <td>{car.color}</td>
                                <td>{car.price}</td>
                            </tr>
                            <tr>
                                <td>{car.make}</td>
                                <td>{car.model}</td>
                                <td>{car.year}</td>
                                <td>{car.color}</td>
                                <td>{car.price}</td>
                            </tr>
                        </div>,
                    )}
                </tbody>
            </table>
        </div>;
    }

warning.js:35警告：validateDOMNesting（…）：不能显示为的子级。请参见CarTool>tbody>div。
warning.js:35 warning:validateDOMNesting（…）：不能显示为的子级。参见CarTool>div>tr。
公共渲染（）{
返回
汽车工具
制作
模型
年
颜色
价格
{this.props.cars.map（（car）=>
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
,
)}
;
}

制定车型年颜色价格 福特Edge 2016白色42000 福特Edge 2016白色42000 福特Ranger 2006白色10000 福特Ranger 2006白色10000 雪佛兰马里布2012蓝色32000

---

Chevy Malibu 2012 blue 32000

将

div

元素作为

tbody

的子元素是无效的语法

<tbody>
    {this.props.cars.map((car) =>
        <tr>
            <td>{car.make}</td>
            <td>{car.model}</td>
            <td>{car.year}</td>
            <td>{car.color}</td>
            <td>{car.price}</td>
        </tr>
    )}
</tbody>

{this.props.cars.map（（car）=>
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
)}

---

另外，不要忘记为每个元素包含

键

，因为您是通过

map

动态创建它们的，将

div

元素作为

tbody

的子元素是无效的语法

<tbody>
    {this.props.cars.map((car) =>
        <tr>
            <td>{car.make}</td>
            <td>{car.model}</td>
            <td>{car.year}</td>
            <td>{car.color}</td>
            <td>{car.price}</td>
        </tr>
    )}
</tbody>

{this.props.cars.map（（car）=>
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
)}

另外，不要忘记为每个元素包含

键

，因为您正在通过

映射

动态创建它们

{this.props.cars.map((car, index) =>
                    [
                        <tr key={"value" + index}>
                            <td>{car.make}</td>
                            <td>{car.model}</td>
                            <td>{car.year}</td>
                            <td>{car.color}</td>
                            <td>{car.price}</td>
                        </tr>,
                        <tr key={"input" + index}>
                            <td>{car.make}</td>
                            <td>{car.model}</td>
                            <td>{car.year}</td>
                            <td>{car.color}</td>
                            <td>{car.price}</td>
                        </tr>
                    ],
                )}

{this.props.cars.map（（car，index）=>
[
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
,
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
],
)}

试试这个

{this.props.cars.map((car, index) =>
                    [
                        <tr key={"value" + index}>
                            <td>{car.make}</td>
                            <td>{car.model}</td>
                            <td>{car.year}</td>
                            <td>{car.color}</td>
                            <td>{car.price}</td>
                        </tr>,
                        <tr key={"input" + index}>
                            <td>{car.make}</td>
                            <td>{car.model}</td>
                            <td>{car.year}</td>
                            <td>{car.color}</td>
                            <td>{car.price}</td>
                        </tr>
                    ],
                )}

{this.props.cars.map（（car，index）=>
[
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
,
{汽车制造}
{car.model}
{car.year}
{car.color}
{car.price}
],
)}

谢谢！那很好用。我很熟悉索引的需要，我只是快速地把它组合起来进行测试。但是呈现多行的语法记录在哪里？我想读一读。基于到目前为止对react的有限了解，我想不到会这么做。谢谢！那很好用。我很熟悉索引的需要，我只是快速地把它组合起来进行测试。但是呈现多行的语法记录在哪里？我想读一读。基于到目前为止我对react有限的知识，我不会想到会这样做。