reactjs - 如何从应用程序组件访问我的反应可重用表格单元格数据

Question

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

好友组件

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", "[e-mail]", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "[e-mail]", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "[e-mail]", "12/01/2020"],
        },
    ];
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData} />
      </div>
    )
}

export default Friends;

表组件

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

表格行组件

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;

表格单元组件

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

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

export default TableCell;

标签： reactjsreusability

Answer 1

好友组件

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", "[e-mail]", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "[e-mail]", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "[e-mail]", "12/01/2020"],
        },
    ];

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

export default Friends;

表组件

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

表格行组件

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;

表格单元组件

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

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

export default TableCell;