如何从 Parent 访问 Child 中 Return 之外的变量？

Question

如果我将我的按钮保留在我的 child 中，这会很好用，除了我在每一行中都显示了按钮这一事实。我想将我的按钮移动到 parent 以便它们只在屏幕底部显示一次。我尝试将我的按钮移动到 parent 上的 return，并将我的状态代码放在 return 上方。我认为这会起作用，除了我的 child 中的“count”值，对于我的 graphql 变量“offset”，现在需要访问我的 parent 中的“count”。不知道如何做到这一点。我对 React 和 graphql 还很陌生。

import React, { Component, useState } from 'react';
import { useQuery, gql } from '@apollo/client';
import {Table, Spinner, Button} from 'react-bootstrap'

const Customer_List = gql`
query getCust ($configID: Int, $first: Int, $offset: Int ) {

docsconfig (configID:$configID first:$first offset:$offset) {
  SubDomain
  ConfigID
  CustID
  customers {
    FirstName
    LastName
  }

}

}
`

function CustomerList() {

  const { loading, error, data} = useQuery(Customer_List, {
  variables: {
    configID: 1436,
    first: 10,
    offset: count
  },
}
);


  if (loading) return <td> <Spinner animation="border" role="status">
  <span className="sr-only">Loading...</span>
</Spinner> </td>
  if (error) return <p>Error :(</p>;

  return data.docsconfig.map(({ CustID, SubDomain, customers, FirstName, LastName}) => (


        <tr key={CustID}>
          <td>{customers.FirstName}</td>
          <td>{customers.LastName}</td>
          <td>{SubDomain}</td>
        </tr>

    )

  )

}


function Customers () {

  const [count, setCount] = useState(0)

  function increase() {
    setCount(count + 10);
  }

  function decrease() {
    setCount(count - 10);

    if (count === 0) {
      setCount(count + 0);

    }
  }

    return (
      <Table striped bordered hover>
      <thead >
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>SubDomain</th>
        </tr>
      </thead>
      <tbody>
       <CustomerList />
      </tbody>
      <tr>
      <button onClick={decrease}>-</button>
      <button onClick={increase}>+</button>
      </tr>
       </Table>
    );
  }

export default Customers;

Answer 1

将 count 作为道具传递给 CustomerList。

客户名单

function CustomerList({ count }) { // <-- desctructure count from props
  const { loading, error, data} = useQuery(
    Customer_List,
    {
      variables: {
        configID: 1436,
        first: 10,
        offset: count // <-- pass to config/options
      },
    }
  );
  ...

客户

function Customers () {
  const [count, setCount] = useState(0)

  ...

  return (
    <Table striped bordered hover>
      <thead >
        ...
      </thead>
      <tbody>
       <CustomerList count={count} /> // <-- pass count to CustomerList
      </tbody>
      <tr>
        <button onClick={decrease}>-</button>
        <button onClick={increase}>+</button>
      </tr>
    </Table>
  );
}

如何从 Parent 访问 Child 中 Return 之外的变量？

How to Access Variable Outside of Return in a Child from Parent?

reactjs

graphql

react-apollo