Question

获取 React 组件的 URL

2018-02-16

16231

javascript reactjs react-redux react-router-v4 fetch-api

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

非常感谢大家的帮助，期待您的帮助。

Answer 1

将 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'));
  })

编辑 Stateful Home 组件

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

Answer 2

您可以将行作为道具传递给您的 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