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

【问题标题】：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});
      }
   }

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

谢谢。

【问题讨论】：

标签： reactjs react-props react-functional-component react-class-based-component

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

【讨论】：

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