Reactjs 如何从React中的子组件中提取变量值

我得到了“Count”组件，它是子组件。 在父组件中，我得到了变量调用“initial”，它每5秒递增一次。如何使用React从子组件中提取“初始”值

父组件：

function App() {
  var initial = 0
  setInterval(function(){ initial++ }, 5000);
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Login initial={initial}/>
        <button onClick={()=>(this.forceUpdate())}>click</button>
    </div>
  );
}

const Count = ({initial}) => {
  const [count, setCount] = useInitialState(

   //How should I implement the useInitialState so that it will pull the 
   //initial value from the parent every 5 sec

  );
  return (
    <div>
        {count}
    </div>
  );
}

函数应用程序（）{
初始值=0
setInterval（函数（）{initial++}，5000）；
返回(
（this.forceUpdate（））}>单击
);
}

子组件：

function App() {
  var initial = 0
  setInterval(function(){ initial++ }, 5000);
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Login initial={initial}/>
        <button onClick={()=>(this.forceUpdate())}>click</button>
    </div>
  );
}

const Count = ({initial}) => {
  const [count, setCount] = useInitialState(

   //How should I implement the useInitialState so that it will pull the 
   //initial value from the parent every 5 sec

  );
  return (
    <div>
        {count}
    </div>
  );
}

const Count=（{initial}）=>{
const[count，setCount]=useInitialState(
//我应该如何实现useInitialState，以便它将
//每5秒从父级获取初始值
);
返回(
{count}
);
}

如果要从父组件获取初始值，需要将初始值存储在状态中，并每5秒更新一次状态。这样，它将自动重新渲染子组件，您将能够通过prop获得初始值

function App() {
  const [initial, setInitial] = useState(0);
  setInterval(function(){ setInitial(initial++) }, 5000);
  return (
    <div className="App">
        <Count initial={initial}
    </div>
  );
}

函数应用程序（）{
const[initial，setInitial]=useState（0）；
setInterval（function（）{setInitial（initial++）}，5000）；
返回(
添加另一个答案以从子组件中提取初始值


在接收数据的父组件中创建回调
需要作为参数
将此回调作为道具传递给子组件
使用回调从子组件发送数据

父组件

function App() {
  const getInitial = () => {} // initial value for getInitial 

  setGetInitialMethod = (newMethod) => {
    getInitial = newMethod;
  }
  var initial = 0
  setInterval(function(){ initial++ }, 5000);
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Login initial={initial}/>
        <button onClick={()=>(this.forceUpdate())}>click</button>
        <Count setGetInitialMethod={setGetInitialMethod}>
    </div>
  );
}

const Count = ({initial, setGetInitialMethod}) => {
  const [count, setCount] = useInitialState(
     setGetInitialMethod(getInitial);
  );
  const getInitial() => {
    alert('clicked');
  }
  return (
    <div>
        {count}
    </div>
  );
}

函数应用程序（）{
常量getInitial=（）=>{}//getInitial的初始值
setGetInitialMethod=（newMethod）=>{
getInitial=newMethod；
}
初始值=0
setInterval（函数（）{initial++}，5000）；
返回(
（this.forceUpdate（））}>单击
);
}

子组件

function App() {
  const getInitial = () => {} // initial value for getInitial 

  setGetInitialMethod = (newMethod) => {
    getInitial = newMethod;
  }
  var initial = 0
  setInterval(function(){ initial++ }, 5000);
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Login initial={initial}/>
        <button onClick={()=>(this.forceUpdate())}>click</button>
        <Count setGetInitialMethod={setGetInitialMethod}>
    </div>
  );
}

const Count = ({initial, setGetInitialMethod}) => {
  const [count, setCount] = useInitialState(
     setGetInitialMethod(getInitial);
  );
  const getInitial() => {
    alert('clicked');
  }
  return (
    <div>
        {count}
    </div>
  );
}

const Count=（{initial，setGetInitialMethod}）=>{
const[count，setCount]=useInitialState(
setGetInitialMethod（getInitial）；
);
常量getInitial（）=>{
警报（“点击”）；
}
返回(
{count}
);
}
请给出一个例子来说明问题。可以使用上下文（）谢谢你的回答。但我已经知道这种方法。我需要找到一种方法将变量值从父组件拉到子组件。这就是如何从父组件到子组件获取值的方法。你是说从子组件到父组件吗？我问了这个问题。我知道有更好的方法可以这样做，但我正在寻找一种方法来拉I子组件的初始值。