2

我对功能组件很陌生，而且我已经做了好几个小时了。我只是想将一个来自父功能组件的道具传递给一个类子组件，以便我将使用更新后的道具（它将是一个布尔值）来更改元素的显示。就这样。

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

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

谢谢你。

4

2 回答 2

3

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 - 此外，由于您直接在子组件中使用道具，您可以考虑不要将道具复制到状态中。

于 2020-05-25T03:56:55.963 回答
1

在父母，

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

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

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

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

于 2020-05-25T03:57:16.617 回答