Question

我的React项目中有20多个组件。因此，对每个组件执行相同的操作将是不明智的，因此从oop概念来看，如果我创建一个具有所有功能的类，则可以将其用于所有想要的对象。

就我而言，我想检查用户是否已登录。如果没有重定向到'/ login'。现在，我在每个组件中都有“ NavigationBar”，在此处编写一些代码来重定向或不重定向。但是几秒钟后，我可以看到每个组件的快照，尤其是那些大型组件。

这也不是明智的选择

所以这是我接下来尝试的工作，创建了一个名为Core的组件，扩展了React.Component，然后我从中扩展了所有组件，但这直接给了我错误。

这里的实际问题是什么？该如何解决？

Answer 1

只需将此行添加到Child.js

import React from "react";

Answer 2

React不允许通过对定义的组件进行子类化来创建组件，创建组件的唯一方法是直接扩展React.Component类，但是react允许您通过使用高阶组件来向定义的组件添加额外的行为旨在通过向现有组件添加包装器来更改已定义的组件

function wrapper(WrappedComponent) {
    return class extends React.Component {

        render() {
            // Here you can add any logic you want 


            return (<div>
                // Here you can add extra code
                <h1>Code rendered by wapper</h1>
                <WrappedComponent {...this.props} />;
            </div>
        }
    }
}

您可以这样使用它

import wrapper from './wrapper';
import Child from './Child';

const HigherWrapper = wrapper(Child);

const rootElement = document.getElementById("root");
ReactDOM.render(<HigherWrapper />, rootElement);

无法扩展反应扩展类

2 个答案: