无法正确对齐表格

Question

我最近才开始学习 ReactJS，并且每次都取得了一些小进步。 我现在正在进行的一项练习希望我正确对齐值及其数量，但似乎我遇到了问题。 以下是我的代码（注意：我只发布了显示表格的相关部分）：

const Statistic = ({text, value, postfix}) => (
    <table >
        <tbody>
            <tr>
                <td>{text}</td>
                <td style={{textAlign: 'right'}}>{value} {postfix}</td>
            </tr>
        </tbody>
    </table>
)

用于统计：

const Statistics = ({good, neutral, bad}) => {
    if((good + neutral + bad) > 0) { 
        return (
            <div>
                <Statistic text="good" value={good} />
                <Statistic text="neutral" value={neutral} />
                <Statistic text="bad" value={bad} />

                <Statistic text="all" value={good + neutral + bad}/>                
                <Statistic text="average" value={(good - bad) / (good + neutral + bad)}/> 
                <Statistic text="positive" value={100 * (good / (good + neutral + bad)) } postfix="%"/>
            </div>
        )
    }

    return(<div>No feeback given</div>)
}

然后在 App 中使用它来呈现它们。 我的输出如下：

红色矩形表示它应该如何对齐。 我确实设法清除了控制台上关于<tbody>的警告，并在网上找到了一些关于使用style={{}}对齐表格的信息，但它似乎不起作用。 我希望获得有关如何解决此问题的任何反馈和/或建议。 先感谢您！

Answer 1

在此：

const Statistic = ({text, value, postfix}) => (
    <table >
        <tbody>
            <tr>
                <td>{text}</td>
                <td style={{textAlign: 'right'}}>{value} {postfix}</td>
            </tr>
        </tbody>
    </table>
)

，它为每条记录生成一个新table和tbody 。 你只想要这个：

const Statistic = ({text, value, postfix}) => (
            <tr>
                <td>{text}</td>
                <td style={{textAlign: 'right'}}>{value} {postfix}</td>
            </tr>
)

然后把

<table >
   <tbody>
   </tbody>
</table>

它不会渲染不止一次的地方。 然后将 Statistic 的结果放在 tbody 标签之间。