Question

我有一个组件ProductList - 它是一个父组件。在m render方法中我编写了这样的代码

 return (
        <div>
            <CustomBreadCrumbs routes={this.props.routes} params={this.props.params} />
            { this.props.children ? this.props.children :
                <section className="content">
                    Parent
                </section>
            }
        </div>
    );

当我在子组件中编辑一些信息时，我的父组件会重新渲染，但我想要阻止它。我怎么能这样做？

Answer 1

这是不可能的，因为只有在重新渲染父组件时才会重新渲染孩子。

正如您所见there，如果您阻止使用shouldComponentUpdate重新发送当前元素，则不会雇用子项呈现方法。

但别担心React Only Updates What's Necessary。因此，如果父元素的html不会改变，真正的DOM将只更新子代的html。

展示案例

官方文档中有example，关于如何创建表单。简而言之，您的主要问题是，您不会在任何地方保存您的值，如我所见，您使用Redux并通过props传递所有数据。尝试更改代码，将数据保存在组件的自身状态中。

如果您在BadRequest上发现错误，您将触发代码，检查相等性，例如消息（错误）和更新组件，但是当前状态，所有用户数据不会改变。

shouldComponentUpdate(nextProps, nextState) {
    //there you will get the new values and check it, if they not equal
}

componentDidUpdate(prevProps, prevState) {
    //there you can do anything with your new values
}

如果您使用Redux，请查看Redux Form。

如何防止在React.js中重新呈现父组件

1 个答案: