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

Question

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

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

这是父组件（功能）：

   let opened = false;

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

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

和子组件 (class)：

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

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

谢谢。

Answer 1

useState 的参数只使用了一次。您需要在 openSidenav 函数中设置状态以触发 re-render.

Parent


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

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

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

Child

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

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

Answer 2

在parent、

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

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

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

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

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

How to pass props from functional component to class component

reactjs

react-props

react-functional-component

react-class-based-component