如何在提交按钮后使用新道具重新渲染 React 组件？答案

【问题标题】：How to re-render a React component using new props after submit button?如何在提交按钮后使用新道具重新渲染 React 组件？
【发布时间】：2021-02-08 06:54:40
【问题描述】：

我有用户选择选项，这些都保存在父组件的状态中。父组件是带有“表单”的整个网页。

当用户按下“提交”时，我希望使用这些选项的子组件使用传入的这些新道具重新渲染。加载页面时会显示默认生成。

但是，我不希望在按下“提交”之前完成，只能在之后完成。

我能想到的就是从节点中删除元素并重新生成它，但这不是使用 React 的好方法。让我知道是否需要更多说明/上下文。我是 React 的新手，我正在做这个项目来熟悉它和它的行为。

谢谢！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我想你想要的是当传递给它的道具（子组件）发生变化时重新渲染子组件。组件在状态发生变化时会重新渲染，因此您可以让子组件拥有自己的状态，并通过 props 初始化（或 componentDidMount）状态值。因此，只要 props 发生变化，状态就会自动发生变化，因此组件将在您按下提交按钮后重新渲染。

此外，如果您希望子组件仅在按下提交按钮后才呈现，您可以保持 isVisible 状态，并使用三元运算符或 if__else 块有条件地呈现它

【讨论】：

父组件是带有“表单”的整个网页。子组件是根据该表单的输入生成的，但是在加载页面时可以看到默认生成。当子元素已经构建时，我将如何更改道具？
您可以将初始状态设置为您想要的默认值，在 componentDidMount 中您可以使用 this.setState({ // 状态更改来到这里 }) 并在其中设置用表单的道具陈述。所以最初它会以默认状态渲染，当你提交时，组件重新渲染，props初始化状态并出现在ui上。