如何从应用程序组件访问我的 React 可重用 table 单元格数据

Question

我创建了一个 table 组件，这样我就可以在项目的不同部分重用它，因为我需要它更灵活，并且更好地实践如何做到这一点 我的目标： 在我的 Friends 组件中 我正在尝试捕获用户点击的单元格。

好友组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData} />
      </div>
    )
}

export default Friends;

Table 组件

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={() => console.log('user clicked on row #', row.id)}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

Table行组件

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked, onCellClick}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={()=>console.log('user cliecked on cell name',cell)}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

TabelCell 组件

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

Answer 1

通常，您会声明一个接受一些数据参数的函数和一个 returns 函数，并将其用作您的点击处理程序。您可以在发表评论的地方声明它并将其作为道具传递。

这利用闭包的概念使每个回调对于被单击的行都是唯一的。

例如：

const Friends = () => {


    // My goal is to get the the information about the clickedcell here
    const onRowClicked = rowData => () => {
      // do something with rowData
    }
    // the return value of this function call 
    // is the click handler with the row data as closure
    <SomeComponentDownstream onClick={onRowClicked(row.data)} />
}

Answer 2

正如我正确理解的那样，您想从另一条路线或 App.js（合并所有路由器）获取单元格点击单元格数据

使用 Redux 存储全局状态
使用localStorage存储在浏览器内存中

Answer 3

好友组件

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];

    const onFriendClicked = (e) => {
        console.log(e.target);
    }
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData}
          onTableClicked={onFriendClicked}
        />
      </div>
    )
}

export default Friends;

Table 组件

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData, onTableClicked}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={onTableClicked}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

Table行组件

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={onRowClicked}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

TabelCell 组件

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

如何从应用程序组件访问我的 React 可重用 table 单元格数据

how to access from app component to my react reusable table cell data

reactjs

reusability