Question

问题是我不知道如何从父组件到子组件实现效果... 我正在创建排序功能。

tableSort = (event, sortKey) => {
        const {data} = this.state;
        data.sort((a,b) => a[sortKey].localeCompare(b[sortKey]) )
        this.setState({ data })
    }

然后我尝试在表格中呈现它

render() {
    const {data} = this.state
    return (
        <>
            <Table>
                <Thead>
                    <Tr>
                        <Th onClick={e => this.tableSort(e, 'pool number')}>Pool Number</Th>
                        <Th>Sender</Th>
                        <Th>Not Routed Reason</Th>
                        <Th>Sent Date Time</Th>
                        <Th>Requested Delivery Report Mask Text</Th>
                        <Th>Delivery Report Received Date Time</Th>
                        <Th>isUnicode</Th>
                        <Th>MessageUUID</Th>
                    </Tr>
                </Thead>
                {this.renderData(data)}
            </Table>
        </>
    )
}

子组件在此组件中被调用，并像这样锁定。

import React from 'react'
import { Tbody, Tr, Td } from 'react-super-responsive-table'

const TablePageList = ({data}) => {
    const {poolNumber, sender, notRoutedReason, sentDateTime, requestedDeliveryReportMaskText,
        deliveryReportReceivedDateTime, isUnicode, messageUUID} = data
        return (
            <Tbody>
                <Tr>
                    <Td>{poolNumber}</Td>
                    <Td>{sender}</Td>
                    <Td>{notRoutedReason}</Td>
                    <Td>{sentDateTime}</Td>
                    <Td>{requestedDeliveryReportMaskText}</Td>
                    <Td>{deliveryReportReceivedDateTime}</Td>
                    <Td>{isUnicode}</Td>
                    <Td>{messageUUID}</Td>
                </Tr>
            </Tbody>
        )
    }

export default TablePageList

那么我如何从Th中访问Td并对其排序？

Answer 1

您应该从父级调用子级组件。您没有调用任何子组件。

尝试下面的代码。

导入子内容网址。

WITH "sylvain, nicolas, christophe" AS people 
MERGE (article:ArticleTest{
  title:"MyTitle"
})

FOREACH (name IN split(people, ",") |
  MERGE (person:Person {title:trim(name)})
  MERGE (person)-[:MENTIONED_IN]->(article))
WITH article
MATCH (p:Person)-[:MENTIONED_IN]->(article)
MATCH (p2:Person)-[:MENTIONED_IN]->(article) WHERE p2.title<>p.title
MERGE (p)-[:MENTIONED_WITH]-(p2)

然后保留状态数据。

import TablePageList from "./TablePageList";

还更改功能this.state = { data:[] }和setState。

order data

并调用tableSort = (event, sortKey) => { const {data} = this.state; data.sort((a,b) => a[sortKey].localeCompare(b[sortKey]) ) this.setState({ data: data }) }下面的TablePageList组件

</Thead>

}

然后您得到render() { const { data } = this.state; return ( <Table> <Thead> <Tr> <Th onClick={e => this.tableSort(e, "pool number")}> Pool Number </Th> <Th>Sender</Th> <Th>Not Routed Reason</Th> <Th>Sent Date Time</Th> <Th>Requested Delivery Report Mask Text</Th> <Th>Delivery Report Received Date Time</Th> <Th>isUnicode</Th> <Th>MessageUUID</Th> </Tr> </Thead> {data.map(element => { <TablePageList data={element}></TablePageList>; })} </Table> );并填写。

data

如何单击父组件的标题对子组件中的列进行排序？

1 个答案: