Question

我有一个React组件，它使用react-redux connect函数（装饰器）来设置属性。在JSX中引用此组件时，flowtype抱怨＆＃34; 属性未在...... React元素的道具中找到＆＃34;

type SidebarCmpProps = {
  activeSidebarComponent: string,
  actions: { openCallMember: () => void }
}

@connect(
  (state) => {
    return { activeSidebarComponent: state.sidebar.activeSidebarComponent }
  },
  (dispatch) => ({ actions: bindActionCreators({ openCallMember }, dispatch) })
)
class Sidebar extends React.Component {
  props: SidebarCmpProps
  static propTypes = {
    actions: React.PropTypes.object.isRequired,
    activeSidebarComponent: React.PropTypes.string
  }
}

确切的错误是：

 65:         
             ^^^^^^^^^^^ React element `Sidebar`
 56:   props: SidebarCmpProps
              ^^^^^^^^^^^^^^^ property `actions`. Property not found in...
 65:         
             ^^^^^^^^^^^ props of React element `Sidebar`

要解决此错误，我必须将属性更改为any的联合类型并添加defaultProps，这不是理想的

type SidebarCmpProps = {
  activeSidebarComponent: any | string,
  actions: any | { openCallMember: () => void }
}
class Sidebar extends React.Component {
  static defaultProps: SidebarCmpProps = {
    actions: null,
    activeSidebarComponent: null
  }
}

有更好的解决方案吗？

Answer 1

好吧，您收到property 'actions'. Property not found in错误，因为您只是在activeSidebarComponent设置了@connect道具，并且操作被声明为必需道具actions: React.PropTypes.object.isRequired。

因此，您必须为actions道具设置默认值或删除该限制。

Answer 2

如果你想让两个组件道具都是可选的，你应该像这样定义它们：

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="pdfmake.js"></script>
  <script type="text/javascript" src="vfs_fonts.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="raj.js"></script>
    <script type="text/javascript" src="jspdf.js"></script>



</head>

<body ng-app="pdfDemo">
  <div ng-controller="pdfCtrl">
          <div id="pdfContent">
                  <table id="example-table">
                            <thead>
                            <th>firstName</th>
                            <th>lastName</th>
                            <th>Gender</th>
                            <th>Mobile</th>

                            </thead>
                            <tbody>
                            <tr ng-repeat="emp in employees">
                            <td>{{emp.firstName}}</td>
                            <td>{{emp.lastName}}</td>
                            <td>{{emp.gender}}</td>
                            <td>{{emp.mobile}}</td>
                            </tr>

                            </tbody>

                  </table>
          </div>
    <button ng-click="openPdf()">Open Pdf</button>
    <button ng-click="downloadPdf()">Download Pdf</button>
  </div>

</body>

</html>

另外，我不确定提供React的propTypes和flowtype是否是个好主意。那个重复的逻辑，不是吗？

React Redux Flowtype＆＃34;找不到属性＆＃34;在React元素中，从redux connect获取属性

2 个答案: