如何在反应中从父组件内部初始化子组件状态？答案

【问题标题】：How can you initialize a child components state from inside a parent component in react?如何在反应中从父组件内部初始化子组件状态？
【发布时间】：2021-06-27 02:50:41
【问题描述】：

我有一个按钮，点击后会重定向到另一个组件，但我需要在点击按钮时从父组件内部初始化子组件状态？

这是父组件中的按钮

<button variant="warning" onClick={event =>  window.location.href='/member'} pro={p.publisher}>

这是子组件

const Member = (props) => {
  const [profile, setProfile] = useState({});
  const [user, setUser] = useState({});
  const {pro, notes} = props;

  useEffect(async () => {
    try {
      h = await this.props.pro + 'hello';
      console.log(h);
      setUser(h);
    }

    } catch (e) {
      console.error(e)
    }
  }, [])

  return (
    <div>
     {this.user}
    </div>
  )
}

export default Member;

当我点击按钮时，它会重定向到子组件，但字符串不显示

【问题讨论】：

不过，这不是子组件。您正在重定向到一个不相关的组件。而且您不会将pro 作为道具传递给Member。它只是按钮的一部分。有一些方法可以完成您所追求的事情（例如使用 LocalStorage 或 URL 参数），但似乎使用像 react-router 这样的路由库来处理这种事情会更好。
我实际上已经在这个应用程序上使用了反应路由器。如何将状态传递给 routes.js 中的路由中的路由？假设我做了如何在上面的原始组件中设置 getThisUser？

标签： javascript reactjs

【解决方案1】：

如果您已经在使用react-router-dom，那么我推荐使用Link 组件。

在此处查看文档：https://reactrouter.com/web/api/Link

以及相关的 SO 问题：What is a state in <Link> component of React Router?

<Link to={{
    pathname: "/member",
    state: {
      pro: p.publisher
    }
  }}
/>

在Member

// ..
const Member = (props) => {
  const [profile, setProfile] = useState("")
  useEffect(()=>{
    if (props.location.state && props.location.state.pro) {
      setProfile(props.location.state.pro)
    }
  }, [props.location.state])
}

【讨论】：