如何将道具从功能组件传递到类组件

debugcn 发表于 Dev

奥拉瓦莱·奥拉迪兰（Olawale Oladiran）

我对功能组件还很陌生，已经研究了几个小时。我只是想将道具从父功能组件传递到类子组件，以便我将使用更新的道具（将是布尔值）来更改元素的显示。就这样。

在这种情况下，我想根据道具将sidenav从打开切换为关闭。

这是父组件（功能性）：

   let opened = false;

   function openSidenav(){
       opened = !opened;
   }
   const [sidebarOpened, setOpened ] = useState(opened);

   return (
       <Sidebar sidebarOpened={opened} />
   )

和子组件（类）：

   componentDidUpdate(prevProps) {
      if(this.props.sidebarOpened !== prevProps){
         this.setState({ sidebar: true});
      }
   }

只是不起作用，子组件没有收到更改，我想我没有正确通过道具。我知道代码只需要更正，但是我不知道我在哪里没有得到它。

谢谢。

useState的参数仅使用一次。您需要在openSidenav功能中设置状态以触发重新渲染。

父母


   function openSidenav(){
       setOpened(prev => !prev);
   }
   const [sidebarOpened, setOpened ] = useState(false);

   return (
       <Sidebar sidebarOpened={sidebarOpened} />
   )

同样在子组件中，使用prevProps.sidebarOpened（而不仅仅是prevProps）。

儿童

componentDidUpdate(prevProps) {
      if(this.props.sidebarOpened !== prevProps.sidebarOpened){ //<---- see here
         this.setState({ sidebar: this.props.sidebarOpened});//<---- see here
      }
   }

ps-另外，由于您直接在子组件中使用道具，因此可以考虑不要将道具复制到状态中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。