时间戳

首页 > 解决方案 > 如何从 React 中的子组件中提取变量值

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

问题描述

我得到了“计数”组件，它是子组件。在父组件中，我得到了变量调用“初始”，它每 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>
  );
}

标签： reactjscomponents

解决方案

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

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

推荐阅读