Reactjs 如何从父级访问子级中的Return之外的变量？

如果我把我的按钮放在我的孩子身上，除了我每一行都有按钮外，效果非常好。我想将我的按钮移动到父按钮，这样它们只在屏幕底部显示一次。我试着把我的按钮移到父母的报税表上，把我的州代码放在报税表的上方。我认为这是可行的，除了我的子对象中的“count”值，对于我的graphql变量“offset”，现在需要访问父对象中的“count”。我不知道如何做到这一点。我对反应和作图很陌生

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;

import React，{Component，useState}来自'React'；
从'@apollo/client'导入{useQuery，gql}；
从“react bootstrap”导入{表、微调器、按钮}
const Customer_List=gql`
查询getCust（$configID:Int，$first:Int，$offset:Int）{
docsconfig（configID:$configID first:$first offset:$offset）{
子域
配置ID
卡斯蒂德
顾客{
名字
姓氏
}
}
}
`
函数CustomerList（）{
const{loading，error，data}=useQuery（客户列表{
变量：{
配置ID:1436，
第一:10,，
偏移量：计数
},
}
);
如果（正在加载）返回
加载。。。
if（error）返回错误：（
；
返回data.docsconfig.map（{CustID，SubDomain，customers，FirstName，LastName}）=>(
{customers.FirstName}
{customers.LastName}
{子域}
)
)
}
功能客户（）{
const[count，setCount]=useState（0）
功能增加（）{
设置计数（计数+10）；
}
函数减少（）{
设置计数（计数-10）；
如果（计数==0）{
设置计数（计数+0）；
}
}
返回(
名字
姓
子域
-
+
);
}
导出默认客户；

将

计数作为道具传递给
客户列表

顾客主义者

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 CustomerList（{count}）{/将
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
      },
    }
  );
  ...

函数自定义列表（{count}）{//谢谢！！！它现在正在工作！我花了这么多时间尝试访问该值。看起来我需要花更多时间理解道具。再次感谢！！！@montman太好了！我认为react文档非常擅长解释react的大部分方面，当然也非常擅长解释如何使用状态和道具。欢迎react，欢迎来到so。干杯。谢谢你！！！它现在开始工作了！我花了这么多时间尝试访问该值。看起来我需要花更多的时间理解道具。再次感谢！！！@montman太好了！在我看来，react文档非常擅长解释react的大部分方面，当然还有如何使用状态和道具。欢迎使用react，欢迎使用so。干杯。