reactjs - 我的方法调用有什么问题我尝试学习 React 并且必须将组件和道具传递给孩子

Question

我学习 Reactjs 和 javascript，想调用它withFetching Component，但不明白如何正确设置参数。我了解整体逻辑，但仍在学习细节

这是switch我称之为的地方withFetching

  render() {
    const theFile = encodeURI(`./images/${fileData}`);
    switch (mediaType) {
        case 'xlsx': {
            const newProps = { ...this.props, responseType: 'arraybuffer' };
            return (
            <div className="pg-viewer-wrapper">
                <div className="pg-viewer" id="pg-viewer">
                    <{withFetching(XlsxViewer, newProps, fileType="xlsx", filePath={theFile} )}/>
                </div>
            </div>
        );
            }
    .........

我也尝试这样：（WithFetching即使它是一个功能也可以制作骆驼案）

return (
    <div className="pg-viewer-wrapper">
        <div className="pg-viewer" id="pg-viewer">
            <WithFetching XlsxViewer={XlsxViewer} newProps={newProps} />
        </div>
    </div>
);

但WithFetching构造函数从不开枪！

我尝试这样：

case 'xlsx': {
    const newProps = { ...this.props, responseType: 'arraybuffer', fileType: 'xlsx', filePath: { theFile } };
    // return withFetching(XlsxViewer, newProps);
    return (
        <div className="pg-viewer-wrapper">
            <div className="pg-viewer" id="pg-viewer">
                {WithFetching(XlsxViewer, newProps)};
            </div>
        </div>
    );
}

但仍然WithFetching构造函数从不开枪！

错误：（是的，我知道我使用括号的方式是我的错误，很难学习）

这就是withFetching它自己的文件 fetch-wrapper.jsx 中的内容。上面的WrappedComponent论点是XlsxViewer最终的“屏幕上”组件！

import React, { Component } from 'react';
import Error from './error';
import Loading from './loading';

function withFetching(WrappedComponent, props) {
    return class FetchComponent extends Component {
        constructor(props) {
            // eslint-disable-line no-shadow
            super(props);
            this.state = {};
            this.xhr = this.createRequest(props.filePath);
        }

        componentDidMount() {
            try {
                this.fetch();
            } catch (e) {
                if (this.props.onError) {
                    this.props.onError(e);
                }
                this.setState({ error: 'fetch error' });
            }
        }

        componentWillUnmount() {
            this.abort();
        }

        createRequest(path) {
            let xhr = new XMLHttpRequest();

            if ('withCredentials' in xhr) {
                // XHR for Chrome/Firefox/Opera/Safari.
                xhr.open('GET', path, true);
            // } else if (typeof XDomainRequest !== 'undefined') {
            //  // XDomainRequest for IE.
            //  xhr = new XDomainRequest();
            //  xhr.open('GET', path);
            } else {
                // CORS not supported.
                xhr = null;
                return null;
            }
            if (props.responseType) {
                xhr.responseType = props.responseType;
            }

            xhr.onload = () => {
                if (xhr.status >= 400) {
                    this.setState({ error: `fetch error with status ${xhr.status}` });
                    return;
                }
                const resp = props.responseType ? xhr.response : xhr.responseText;

                this.setState({ data: resp });
            };

            return xhr;
        }

        fetch() {
            this.xhr.send();
        }

        abort() {
            if (this.xhr) {
                this.xhr.abort();
            }
        }

        render() {
            if (!this.xhr) {
                return <h1>CORS not supported..</h1>;
            }

            if (this.state.error) {
                return <Error {...this.props} error={this.state.error} />;
            }

            if (this.state.data) {
                return <WrappedComponent data={this.state.data} {...this.props} />;
            }
            return <Loading />;
        }
    };
}

export default withFetching;

XlxsViewer Component这将是可见的决赛。
感谢版权所有 (c) 2017 PlanGrid, Inc.

import React, { Component } from 'react';
import XLSX from 'xlsx';

import CsvViewer from './csv-viewer';

class XlxsViewer extends Component {
    constructor(props) {
        super(props);
        this.state = this.parse();
    }

    parse() {
        const dataArr = new Uint8Array(this.props.data);
        const arr = [];

        for (let i = 0; i !== dataArr.length; i += 1) {
            arr.push(String.fromCharCode(dataArr[i]));
        }

        const workbook = XLSX.read(arr.join(''), { type: 'binary' });
        const names = Object.keys(workbook.Sheets);
        const sheets = names.map(name => XLSX.utils.sheet_to_csv(workbook.Sheets[name]));

        return { sheets, names, curSheetIndex: 0 };
    }

    renderSheetNames(names) {
        const sheets = names.map((name, index) => (
            <input
                key={name}
                type="button"
                value={name}
                onClick={() => {
                    this.setState({ curSheetIndex: index });
                }}
            />
        ));

        return <div className="sheet-names">{sheets}</div>;
    }

    renderSheetData(sheet) {
        const csvProps = Object.assign({}, this.props, { data: sheet });
        return <CsvViewer {...csvProps} />;
    }

    render() {
        const { sheets, names, curSheetIndex } = this.state;
        return (
            <div className="spreadsheet-viewer">
                {this.renderSheetNames(names)}
                {this.renderSheetData(sheets[curSheetIndex || 0])}
            </div>
        );
    }
}

export default XlxsViewer;