编辑 - PDF文件

Question

我正在尝试构建一个可以用作npm包的组件，并构建了一个示例应用程序来测试和演示用法。这导致

我有两个文件：包源：PDF和index。 PDF使用

定义组件和导出

export default PDF;

index.js只是export {default} from './PDF';

编辑 - PDF文件

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Viewer from './Viewer';
import pdfjsLib from './../node_modules/pdfjs-dist/webpack'

class PDF extends Component {

    constructor(props) {
        super(props);

        this.state = {
            document: null
        }
    }

    componentDidMount() {

        const loadingTask = pdfjsLib.getDocument(this.props.file);
        loadingTask.promise.then(document => {
            console.log('Loaded Document');
            console.log(document);
            this.setState({
                document: document
            })
        }).catch(err => {
            console.log(err);
        });
    }

    render() {
        return(
            <div>
                <Viewer doc={this.state.document}/>
            </div>
        )
    }

}

export {PDF};

Webpack构建配置

module.exports = {
    entry: {
        'index': path.join(__dirname, 'src', 'index.js')
    },
    output: {
        path: path.join(__dirname, '/lib'),
        filename: '[name].js',
        sourceMapFilename: '[name].map'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                use: ['url-loader']
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react", "stage-2"]
                    }
                }
            },
        ]
    }
};

为构建工件创建/lib文件夹。

然后我将此构建文件夹符号链接到project/example/node_modules/react-pdf并在示例演示中使用它，如下所示：

import React, {Component} from 'react';
import PDF from 'react-pdf';

class Viewer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            file: '//s3-us-west-2.amazonaws.com/bucket-test/test-file-43092.pdf'
        }
    }

    render() {
        return(
            <div>
                <PDF document={this.state.file}/>
            </div>
        )
    }
}

export default Viewer;

但这导致了屏幕截图的开始。

我尝试过的其他事情：

project / src / index.js export {PDF} from './PDF';
project / src / index.js export {PDF as default} from './PDF';
project / src / PDF.js export {PDF};
project / example / src / Viewer.js import {PDF} from 'react-pdf';

但没有任何效果。我怀疑这与webpack构建配置有关，但没有任何东西突然出现在我身上。

Answer 1

只需在PDF课程中尝试此操作

即可

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Viewer from './Viewer';
import pdfjsLib from './../node_modules/pdfjs-dist/webpack'

export class PDF extends Component { //Update export inline

    constructor(props) {
        super(props);

        this.state = {
            document: null
        }
    }

    componentDidMount() {

        const loadingTask = pdfjsLib.getDocument(this.props.file);
        loadingTask.promise.then(document => {
            console.log('Loaded Document');
            console.log(document);
            this.setState({
                document: document
            })
        }).catch(err => {
            console.log(err);
        });
    }

    render() {
        return(
            <div>
                <Viewer doc={this.state.document}/>
            </div>
        )
    }

}

//export {PDF}; // remove this line

React组件未被识别为字符串或类函数

编辑 - PDF文件

1 个答案: