Question

我正在使用MERN开发堆栈制作一个文件共享Web应用程序。将文件共享屏幕连接到更新屏幕时，我被卡住了。

['ABCD, Jun/14/1999', 'EFGH, Jan/10/1998', 'IJKL, Jul/15/1985', 'MNOP, Dec/21/1999', 'QRST, Apr/01/2000', 'UVWX, Feb/11/2001']在当前版本的React中不起作用。我试图找到一个替代品，它显示了任何一套 ComponentsWillReceiveProps()或使用函数UNSAFE_ComponentsWillReceiveProps()，但我不知道如何定义static getDerivedStateFromProps(nextProps, prevState)。

我的代码是：

prevState

Answer 1

只需看一眼代码，我就对其进行了一些重构，以使该组件尽可能的简单（哑/表示组件），该组件在输入新道具时会显示它们。

以下是说明：https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43

我建议将状态提升到一个水平并在父级中进行数据转换。

HomeUploading这样的事情

import React, { Component } from 'react';
import PropTypes from 'prop-types';

const HomeUploading = ({
  data,
  event,
  loaded,
  total,
  percentage,
}) => (
  <div className={'app-card app-card-uploading'}>
    <div className={'app-card-content'}>
      <div className={'app-card-content-inner'}>
        <div className={'app-home-uploading'}>
          <div className={'app-home-uploading-icon'}>
            <i className={'icon-cloud-upload'} />
            <h2>Sending...</h2>
          </div>

          <div className={'app-upload-files-total'}>Uploading {data.length} files</div>
          <div className={'app-progress'}>
            <span style={{ width: `${percentage}%` }} className={'app-progress-bar'} />
          </div>
          <div className={'app-upload-stats'}>
            <div className={'app-upload-stats-left'}>
              {loaded}Bytes/{total}Bytes
            </div>
            <div className={'app-upload-stats-right'}>456K/s</div>
          </div>
          <div className={'app-form-actions'}>
            <button className={'app-upload-cancel-button app-button'} type={'button'}>
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

HomeUploading.propTypes = {
  data: PropTypes.object,
  event: PropTypes.object,
};

export default HomeUploading;

然后在父级中，您可以具有在函数中转换数据的逻辑：

import React, { Component } from 'react';

class Parent extends Component {

  state = {
    data: null,
    event: null,
    loaded: 0,
    total: 0,
    percentage: 0,
  }

  calcPercentage(loaded, total) {
    return (total !== 0) ? ((loaded / total) * 100) : 0
  }

  render() {
    const {
      data,
      event,
      loaded,
      total
    } from this.state;
    return (
      <HomeUploading 
        data={data}
        event={event}
        loaded={loaded}
        total={total}
        percentage={this.calcPercentage(loaded, total)}
      />
    );
  }

}

export default Parent;

这种方法将使您无需依赖componentWillReceiveProps即可更新道具。

使用React和Node js的文件共享Web应用

1 个答案: