[英]Fetch url to React component
我遇到了React基礎知識:/有代碼生成帶有json數據的表:
import React from 'react'
import { DataTable } from 'react-data-components';
function buildTable(data) {
const tableColumns = [
{ title: 'Author', prop: 'author' },
{ title: 'Country', prop: 'country' },
{ title: 'Title', prop: 'title' },
];
return (
<DataTable
className="container"
keys="id"
columns={tableColumns}
initialData={data}
initialPageLength={5}
/>
);
}
let url = 'https://api.myjson.com/bins/1sbz3lp';
fetch(url)
.then(res => res.json())
.then((rows) => {
ReactDOM.render(buildTable(rows), document.getElementById('root'));
});
它在index.js
完成了工作,但是可以在React組件中呈現表嗎?
const Home = () => (
//renders buildTable(rows)
)
export default Home
非常感謝所有可能的幫助,期待。
將buildTable()
移動到Home.js
然后在index.js
呈現Home組件,將rows
作為props傳遞:
Home.js
import React from 'react'
import { DataTable } from 'react-data-components'
function buildTable(data) {
const tableColumns = [
{ title: 'Author', prop: 'author' },
{ title: 'Country', prop: 'country' },
{ title: 'Title', prop: 'title' },
]
return (
<DataTable
className="container"
keys="id"
columns={tableColumns}
initialData={data}
initialPageLength={5}
/>
)
}
const Home = props => buildTable(props.data)
export default Home
index.js
import ReactDOM from 'react-dom'
import Home from './Home'
let url = 'https://api.myjson.com/bins/1sbz3lp'
fetch(url)
.then(res => res.json())
.then(rows => {
ReactDOM.render(<Home data={rows} />, document.getElementById('root'));
})
編輯有狀態主頁組件
Home.js
import React, { Component } from 'react'
import { DataTable } from 'react-data-components'
const url = 'https://api.myjson.com/bins/1sbz3lp'
class Home extends Component {
state = {
data: []
}
buildTable = (data) => {
const tableColumns = [
{ title: 'Author', prop: 'author' },
{ title: 'Country', prop: 'country' },
{ title: 'Title', prop: 'title' },
]
return (
<DataTable
className="container"
keys="id"
columns={tableColumns}
initialData={data}
initialPageLength={5}
/>
)
}
componentDidMount() {
fetch(url)
.then(res => res.json())
.then((rows) => {
this.setState({ data: rows })
})
}
render() {
return <div>{this.buildTable(this.state.data)}</div>
}
}
export default Home
您可以將這些行作為Home組件的道具傳遞,然后執行您想要的任何操作。
fetch(url)
.then(res => res.json())
.then((rows) => {
ReactDOM.render(<Home data={rows} />, document.getElementById('root'));
});
現在,您可以使用this.props.data
獲取行信息,並在組件中的buildTable中執行您正在執行的操作。
import React from 'react'
const Home = () => (
//this.props.data will give you the rows data and do whatever you want here.
//renders buildTable(rows)
)
export default Home
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.