Question

我正在关注this指南，尝试编写一个React高阶组件。

我正在尝试使用可重用的窗口组件，它将充当其他组件的容器，提供样式和行为。

我正在使用一个播放器组件测试它，现在只需从npm包中返回一个ReactPlayer组件react-player

import React, { Component } from 'react';


function Window(WrappedComponent){
    return class extends Component{
        render(){
            return (
                <div className="window">
                    <WrappedComponent/>
                </div>
            );
        }
    }
}

export default Window();

这是播放器组件的代码

import React, { Component } from 'react';
import ReactPlayer from 'react-player';
import Window from './Window.js'

class Player extends Component {
    render () {
        return <ReactPlayer url='https://www.youtube.com/watch?v=iIKKvG0_KdM' playing />
    }
}

const PlayerWindow = Window(Player);

export default PlayerWindow;

Answer 1

将DB::select('SELECT "paymentRun"(更改为export default Window();

Answer 2

从export default Window();中删除括号或者，在调用函数时，您可以编写

> export const Window = function Window(WrappedComponent){
>     return class extends Component{
>         render(){
>             return (
>                 <div className="window">
>                     <WrappedComponent/>
>                  </div>
>             );
>         }
>     } 
> }

React HOC：TypeError：无法将类作为函数调用

2 个答案: