将常量数据从功能组件传递到类组件

Question

所以我在构建一个网络应用程序时遇到了一个小问题。这是我第一次使用 react，所以想知道如何做到这一点。 我有一个功能组件 FilteringTable.js 用于显示表格、过滤和选择行。如果选择了任何行，我想在 footer.js 脚本中启用“查看预订”按钮，并通过 Details.js 脚本显示行详细信息。 我希望将 selectedFlatRows 变量发送到这两个类组件。 有没有办法做到这一点？请帮忙。

FilteringTable.js

import React, { useMemo } from 'react'
import { useTable, useFilters, useGlobalFilter, usePagination, useRowSelect } from 'react-table'
import MOCK_DATA from './Data.json'
import { COLUMNS } from './columns'
import './table.scss'
import { GlobalFilter } from './GlobalFilter'
import { ColumnFilter } from './ColumnFilter'
import './style.scss'
import { Checkbox } from './Checkbox'

export const FilteringTable = () => {
  const columns = useMemo(() => COLUMNS, [])
  const data = useMemo(() => MOCK_DATA, [])

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    footerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    pageOptions,
    gotoPage,
    pageCount,
    prepareRow,
    selectedFlatRows,
    state,
    setGlobalFilter
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 15 }
    },
    useFilters,
    useGlobalFilter,
    usePagination,
    useRowSelect,
    (hooks) => {
        hooks.visibleColumns.push((columns) => {
            return [
                {
                    id:'Selection',
                    Header:({getToggleAllRowsSelectedProps})=>(
                        <Checkbox {...getToggleAllRowsSelectedProps()}/>
                    ),
                    Cell:({row})=>(
                        <Checkbox {...row.getToggleRowSelectedProps()}/>
                    )
                },
                ...columns
        ]
        })
    }
  )
  
  const { pageIndex, pageSize } = state

  return (
    <>
    <div className="content">
        <h4>Filter By:</h4>
      {headerGroups.map(headerGroup => (
      <div  {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => (
      <div className="filter-form">{column.canFilter ? column.render('Filter') : null}</div>
      ))}
      </div>
      ))}
      <table className="list-table" 
      {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>
                  {cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
      <div className="pagination">
          <span>
              Page{' '}
              <strong>
                  {pageIndex + 1} of {pageOptions.length}
              </strong>{' '}
          </span>
          <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>{"<<"}</button>
          <button onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</button>
          <button onClick={() => nextPage()} disabled={!canNextPage}>Next</button>
          <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>{">>"}</button>
      </div>
      <pre>
          <code>
              {console.log(selectedFlatRows)}
              {/*{JSON.stringify({selectedFlatRows: selectedFlatRows.map((row) => row.original)},null,2)}*/}
          </code>
      </pre>
      </div>
    </>
  )
}

有没有办法访问footer.js和Details.js中的selectedFlatRows

footer.js

import React from 'react'
import './style.scss'

class footer extends React.Component{
    render(){
        return(
            <footer className='footer'>
                <button className='footer_button' disabled>View Reservation</button>
            </footer>
        )
    }
}

export default footer

Details.js

import React from 'react'

class Details extends React.Component{
    render(){
        return(
            <div className="content">
                <h3>Reservation Detail</h3>
                <table className="form-table">
                <thead>
                <tr>
                    <th>Reservation Detail View</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td className="detail-view">
                        <div>Reserservation ID: <strong>{}</strong></div>
                        <div>Trip Start Time: <strong>{}</strong></div>
                        <div>Trip End Time: <strong>{}</strong></div>
                        <div>Trip Start Location: <strong>{}</strong></div>
                        <div>Trip End Location: <strong>{}</strong></div>                 
                    </td>
                </tr>
                </tbody>
            </table>
            </div>
        )
    }
}

export default Details

先谢谢你！