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

Posted 2023-03-16

【中文标题】如何将道具从功能组件传递到类组件

【英文标题】：How to pass props from functional component to class component

【发布时间】：2020-09-11 16:21:09

【问题描述】：

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

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

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

谢谢。

【参考方案1】：

在父级中，

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

  function openSidenav()
    setOpened(!sidebarOpened);
  

  return (
    <Sidebar sidebarOpened=sidebarOpened />
  )

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

【讨论】：

那个setOpened(!opened) 方法只工作了一次（第一次），在随后的点击中它没有工作。我想这是您的答案和接受的答案的唯一区别。谢谢。

你是对的。 openSidenav() fn 必须是 setOpened(!sidebarOpened)。改变了我的答案。

【参考方案2】：

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

【讨论】：

谢谢！我直接在渲染中使用了道具，它起作用了。