Question

我想弄清楚如何创建简单的React组件，该组件根据父组件传递给孩子的道具的更改进行更新。当我在内部更新组件状态时，我能够达到预期的结果，但是我希望组件通过更改其道具完全由其父级控制。在常规React中，这是微不足道的，但是我一直无法弄清楚如何在SSR Next.js应用程序中实现这一点。

这是一个普遍的问题，将影响我打算构建的许多组件，但为清楚起见，我将重点介绍我当前正在研究的一个组件：一个可折叠的容器，该容器具有一个布尔折叠的道具，可以确定是否容器已折叠。

当父组件更新其道具时，如何使Next.js在子组件中触发React生命周期方法（尤其是componentDidUpdate）？

我已经研究过使用 getInitialProps ，但是根据Next.js文档，这仅适用于页面。同样也就不足为奇了，它没有用。

我还尝试了 componentWillUpdate ， shouldComponentUpdate 甚至 getDerivedStateFromProps ，但除了组件更新其功能外，我没有其他任何运气内部拥有自己的状态，这对于我的用例来说是不可接受的解决方案。

我曾尝试使用React.Component类扩展语法和无状态函数语法来创建此组件，但是它们都没有作用，并且它们的结果没有明显的差异。

我想直接与道具打交道，并且尽可能不涉及状态，因为React文档建议基于道具更新状态是一种不好的做法，更不用说这样做了。

   render() {
      return (
         <div className={ styles.wrapper }>
            <div
               className={ styles.container }
               data-collapsed={ this.props.collapsed }
            >
            </div>
         </div>
      );
   }
}

实际上，折叠效果是通过CSS根据 data-collapsed 自定义属性的值来实现的。此解决方案有效，因此我未包含此代码。

我省略了失败的生命周期方法尝试，但是显然，这应该是非常简单的组件。根据我过去使用Vanilla React的经验，更换子道具会直接引发重新渲染，通常根本不需要任何生命周期方法。

我想要的很简单（我认为）：让父组件更改CollapsableContainer折叠的prop并对其进行相应的更新。我在这里想念什么？

Answer 1

我想通了，这有点尴尬。我正在使用外部变量而不是父变量中的状态变量测试此解决方案。像这样：

let testBool = false;

class Example extends Component {
   render() {
      return (
         <div>
            <ComponentToUpdate
               booleanProp={ testBool }
            />
            <button
               onClick={() => { testBool = !testBool; }}
            >
              Click
            </button>
         </div>
      )
   }
}

但是现在我正在这样做：

class Example extends Component {
   constructor(props) {
      super(props);
      this.state = {
         testBool: false
      }
   }
   render() {
      return (
         <div>
            <ComponentToUpdate
               booleanProp={ this.state.testBool }
            />
            <button
               onClick={() => { setState({ testBool: !this.state.testBool }) }}
            >
              Click
            </button>
         </div>
      )
   }
}

它有效。现在到facepalm。希望这可以帮助其他可能会出现精神肠胃不适的人。

当父代在Next.js应用中更新其道具时，渲染React子代组件

1 个答案: