javascript - reactjs react 表不渲染表

Question

我正在尝试使用 https://react-table.js.org/#/story/readme 中的 react-table 包但是，在我的 Shopify 应用程序中，我无法渲染实际的表格。只显示表格的文本部分？任何人都知道是什么原因造成的？因为它在 iFrame 中，所以它会不会有问题？请参见下图。

发现问题:已添加 <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">直接在我的 View 页面上，它起作用了。 import css 没有正确导入。

import React from 'react'
import ReactDOM from 'react-dom'
import ReactTable from 'react-table'
import PropTypes from 'prop-types'
import { Page, Card, Select, Button, TextField, Stack, FormLayout,
Thumbnail, ResourceList, Pagination, Layout, Checkbox } from '@shopify/polaris';
import "react-table/react-table.css"

class PriceTestContainer extends React.Component {
  render() {
    const data = [{
      age: 26,
      visits: 100
    },{
      age: 44,
      visits: 200
    }]
    return (<ReactTable
              data={data}
              columns={[
              {
                Header: "Info",
                columns: [
                  {
                    Header: "Age",
                    accessor: "age"
                  }
                ]
              },
              {
                Header: 'Stats',
                columns: [
                  {
                    Header: "Visits",
                    accessor: "visits"
                  }
                ]
              }
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
            /> 
    );
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('zzz')
ReactDOM.render(<PriceTestContainer />, node)
})

Answer 1

如果将渲染方法拉到 DOMContentLoaded 监听器之外，看起来您的代码可以正常工作:

class PriceTestContainer extends React.Component {
  render() {
    const data = [{
      age: 26,
      visits: 100
    },{
      age: 44,
      visits: 200
    }]
    return (<ReactTable
              data={data}
              columns={[
              {
                Header: "Info",
                columns: [
                  {
                    Header: "Age",
                    accessor: "age"
                  }
                ]
              },
              {
                Header: 'Stats',
                columns: [
                  {
                    Header: "Visits",
                    accessor: "visits"
                  }
                ]
              }
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
            /> 
    );
  }
}

ReactDOM.render(<PriceTestContainer />, document.getElementById('zzz'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">

  <!-- JS -->
  <script src="https://unpkg.com/react-table@latest/react-table.js"></script>

  <script>
    var ReactTable = window.ReactTable.default
  </script>
  
  <div id="zzz"></div>