reactjs - 从连接装饰器传递下来的操作最初是未定义的

Question

我有以下智能组件，并且我指定 initialUpload 函数是必需的函数:

import React, { Component, PropTypes } from 'react';
import UploadForm from '../../components/UploadForm/UploadForm';
import HeaderSelection from '../../components/HeaderSelection/HeaderSelection';
import { initialUpload } from '../../redux/modules/Upload';
import { connect } from 'react-redux';

console.log(typeof initialUpload); //function

@connect((state) => {
  return {
    file: state.getIn(['upload', 'file'])
  };
}, {
  initialUpload
})
export default class Home extends Component {
  static propTypes = {
    initialUpload: PropTypes.func.isRequired
  };

  render() {
    return (
      <div>
        <UploadForm handleFilesChange={this.props.initialUpload}/>
        <HeaderSelection/>
      </div>
    );
  }
}

但我收到错误消息:

warning.js:36Warning: Failed prop type: The prop initialUpload is marked as required in Connect(Home), but its value is undefined.

该函数被包装在调度中并沿着组件层次结构向下传递，所以我对发生的事情感到困惑。

Answer 1

@connect 将 static propTypes 分配给生成的敲击组件，而不是分配给 Home 本身，这是一种相当奇怪的行为!我认为这是ES7改造造成的，这个行为在以前的版本中是不存在的

解决方法是在类定义外部的wrappedComponent上定义propTypes:

@connect(...)  
export default Home extends Component{  
    render() {  
        // ....  
    }  
}  

Home.WrappedComponent.propTypes = {  
    initialUpload: PropTypes.func.isRequired  
}  

另一种选择是不使用装饰器并直接使用连接