reactjs react-table不呈現表格

我試圖使用我的Shopify應用程序中https://react-table.js.org/#/story/readme的react-table包，但是，我無法獲取實際的表格進行呈現。只有表格的文字部分出現？任何人有什麼線索會導致這種情況？由於它位於iFrame內部，會不會有問題？見下圖。reactjs react-table不呈現表格

發現問題：直接在我的查看頁面上添加了<link rel="stylesheet" href="https://unpkg.com/[email protected]/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) 
})

來源

2017-09-16 ByteMe

看起來像你的代碼工作，如果你拉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/[email protected]/react-table.css"> 
 

 
    <!-- JS --> 
 
    <script src="https://unpkg.com/[email protected]/react-table.js"></script> 
 

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

來源

2017-09-16 20:56:21

當我改變的最後一部分去除事件偵聽器ReactDOM.render（，document.getElementById（'zzz'）），沒有渲染我在我的應用 – ByteMe

裏面爲我提供了頁面，因爲你看到它在這裏呈現，所以也許你有一些其他代碼阻止它呈現或者你沒有正確導入'css'？我看到你確實導入了它，但它是否真的包含在頁面中？ –

我確實認爲CSS導入正確，但我可以仔細檢查。嗯，是的，我不知道還有什麼會阻止它的工作？奇怪的事情發生在Shopify iFrame內部，雖然 – ByteMe

reactjs react-table不呈現表格

回答

相關問題