我最近才开始学习 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={{}}对齐表格的信息,但它似乎不起作用。 我希望获得有关如何解决此问题的任何反馈和/或建议。 先感谢您!

#1楼 票数:1 已采纳

在此:

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

,它为每条记录生成一个新tabletbody 你只想要这个:

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

然后把

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

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

  ask by selfPointer translate from so

未解决问题?本站智能推荐:

1回复

如何将表格与flexbox对齐?

我想对齐我所有的表单输入,例如前两个输入(房间,游客)。 (相同宽度)我使用了flexbox,但它仅在两个元素中起作用,而其他元素则不行。 我对其他输入进行了与前两个输入相同的样式,但无法正常工作。 按钮也包括在flex中,就像输入一样。 每行包含两个输入。 有我的反应代码:
1回复

表格中有多个菜单,无法正确切换

代码沙箱 语境 我有一个有 3 行的表。 每行都有一个按钮来切换下面的菜单 漏洞 单击同一按钮时,无法切换菜单。 否则,它似乎符合以下要求 要求 一次打开一个菜单 点击按钮,菜单下方将显示,最初 单击同一个按钮,可以切换隐藏/显示菜单。 单击菜单本身,它应该保持打开状态。
1回复

如何正确对齐Div

我试图将我的DIV对齐以形成项目符号图表。 我创建了一个示例数据,它将用于使项目符号图变得动态,这里是代码: 这是我想在div中传递而不是在CSS中声明的示例数据: 这是CSS :(现在我不想使用此CSS(这就是为什么某些行在“注释”中)的原因,因为我试图在DIV中输入所有样式
5回复

在中心对齐表格中的项目

我是前端的新手。 我实际上想制作一个看起来像这样的标记, 所以,我尝试了以下方式 现在,在这里,我得到的是 谁能帮我这个?
2回复

div对齐不正确

我想要-框正好位于+框的正下方,如所附图片所示 我已经尝试过下面给出的这段代码,但是不起作用。 有人可以告诉我我需要在CSS中进行哪些更改。 这是reactjs应用程序的一部分。
1回复

Material-UI:如何制作对齐的表格

我是 Material-UI 的新手。 通常如何构建一个表单,其中一些字段水平分组,而另一些字段垂直堆叠,并且所有字段在垂直和水平方向上都很好地对齐? 请参阅以下示例图片: 我知道如何使用纯 HTML 表格构建这种表单,但“正确”的 Material-UI 方式是什么? 示例代码会很好。
1回复

如何垂直对齐表格元素中的元素?

我的桌子有一些问题。 我创建了两张表,一张在另一张下面,我想将元素居中,但我对他的部分有疑问。 我的元素没有垂直对齐,也没有真正居中,如下图所示。 代码如下: <script src="https://cdnjs.cloudflare.com/ajax/libs/reac
3回复

HTML表格无法与CSS正确对齐

我有一系列彼此叠放的表格。 它们可以是单个表,但是出于功能原因,它们被拆分了。 他们看起来像这样: 现在,问题是他们没有像我期望的那样排队。 控制它们的代码如下所示(很长): http://pastebin.com/eWhEPzF5 该结构深3个表,当您拆分表时,您可以