反应内联样式 - 用居中文本替换 tbody

Posted 2023-02-22

【中文标题】反应内联样式 - 用居中文本替换 tbody

【英文标题】：React Inline Style- Replace tbody With Centered Text

【发布时间】：2021-11-08 06:11:54

【问题描述】：

我有一个空数组，我将其转换为 React 中的状态。当未填充数组时，我想在react-bootstrap 表的tbody 中添加一条“还没有匹配事件...”的文本。

图像是它的外观 - 我不确定如何将文本居中在 Card 的中间。

  const [matchEvents, setMatchEvents] = useState([]);

  return (
    <Card>
      <Table size="sm">
        <thead>
          <tr>
            <th style= width: "33.33%" >Event</th>
            <th style= width: "33.33%" >Time</th>
            <th style= width: "33.33%" >Period</th>
          </tr>
        </thead>
        matchEvents.length !== 0 ? (
          <tbody>
            
             //Irrelevant code for mapping object to table in here
            
          </tbody>
        ) : (
          <tbody>
            <tr>
              <td />
              <td
                style=
                  display: "flex",
                  position: "absolute",
                
              >
                No Match Events Yet...
              </td>
              <td />
            </tr>
          </tbody>
        )
      </Table>
    </Card>
  );

我尝试添加 <tr> 和 <td> 作为顶部的填充符，以使文本进入卡片的中心，但我得到了几行作为边框，无法用 !important 覆盖它们出于某种原因。

【问题讨论】：

你想让文字在卡片上垂直居中吗？

@AbdullahKhan 是的，如果可能的话，请在中间！

添加了答案请试一试...

【参考方案1】：

试试这段代码，复制粘贴即可。

您可以在这里预览演示：Demo

const [matchEvents, setMatchEvents] = useState([]);

  <Card>
    <Table size="sm">
      <thead>
        <tr>
          <th style= width: "33.33%" >Event</th>
          <th style= width: "33.33%" >Time</th>
          <th style= width: "33.33%" >Period</th>
        </tr>
      </thead>

      matchEvents.length && (
        <tbody>
          /* Your Table Body */
        </tbody>
      )
    </Table>

    /* Your Error Message */
    !matchEvents.length && (
      <div
        style=
          height: "100vh",
          display: "flex",
          alignItems: "center"
        
      >
        <p style= width: "100%", textAlign: "center" >
          No Match Events Yet...
        </p>
      </div>
    )
  </Card>

【讨论】：

感谢@Abdullah Khan！它可以工作，但我确实在浏览器上收到警告：警告：validateDOMNesting(...)：文本节点不能作为 的子节点出现。这安全吗？ 是的，一切都很安全。尝试删除多余的空格...参考链接：***.com/questions/39914455/…我已经删除了tbody之间的空格，现在试试我的答案