Question

我正在尝试使用Shopify App中https://react-table.js.org/#/story/readme内的react-table软件包，但是，我无法获取实际的表格。只显示表格的文字部分？任何人都有任何关于导致这种情况的线索？它是否存在问题，因为它在iFrame中？见下图。

发现问题：在我的视图页面上直接添加了<link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">并且它有效。导入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侦听器：

，看起来您的代码正常工作

＆＃13;

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'))

＆＃13;

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

＆＃13;

reactjs react-table不呈现表

1 个答案: