[英]Fetch url to React component
I got stuck with React fundamentals :/ There is code that generates table with json data inside: 我遇到了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'));
});
It gets the job done in index.js
but is it possible to render table inside React component? 它在
index.js
完成了工作,但是可以在React组件中呈现表吗?
const Home = () => (
//renders buildTable(rows)
)
export default Home
Many thanks for all possible help, looking forward. 非常感谢所有可能的帮助,期待。
Move buildTable()
to Home.js
then render the Home component in index.js
, passing rows
as props: 将
buildTable()
移动到Home.js
然后在index.js
呈现Home组件,将rows
作为props传递:
Home.js 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 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'));
})
EDIT Stateful Home component 编辑有状态主页组件
Home.js 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
You can pass the rows as a props for your Home component and then do whatever you want. 您可以将这些行作为Home组件的道具传递,然后执行您想要的任何操作。
fetch(url)
.then(res => res.json())
.then((rows) => {
ReactDOM.render(<Home data={rows} />, document.getElementById('root'));
});
Now you can use this.props.data
to get the rows information, and do what you are doing inside the buildTable here in the component. 现在,您可以使用
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.