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

Question

我有一个空数组，我将其转换为 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

标签： javascriptcssreactjsreact-bootstrapinline-styles

Answer 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>