Question

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

在这种情况下，我想根据道具将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});
      }
   }

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

谢谢。

Answer 1

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
      }
   }

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

Answer 2

在父母中，

  const [sidebarOpened, setOpened ] = useState(false);

  function openSidenav(){
    setOpened(!sidebarOpened);
  }

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

在子组件类中，直接使用this.props.sidebarOpened而不是复制prop来声明状态。如果您打算在子组件中编辑sidebarOpened的值，请将setOpened作为道具传递给子组件，并使用它来编辑值。

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

2 个答案: