React HOC 回调不适用于默认道具

Question

我用 recompose 做了一个简单的 HOC，但由于某些原因它不能使用默认道具。如果我从外部提供它正常工作的道具，但不是默认道具（我得到 'onCallback' 不是一个函数，所以基本上是一个未定义的错误）

我的 HOC：

import React from 'react'

import { withStateHandlers, withHandlers, compose } from 'recompose'

const editableRow = () =>
    compose(
        withStateHandlers(
            { isEditing: false, editingId: null },
            {
                toggleEditing: ({ isEditing, editingId }) => entryId => ({
                    isEditing: !isEditing,
                    editingId: isEditing ? null : entryId
                })
            }
        ),
        withHandlers({
            handleSave: ({
                isEditing,
                editingId,
                onEdit,
                onCreate,
                list
            }) => values => { return onEdit(25) }
        })
    )

export default editableRow

我尝试将它与默认道具一起使用，但它不起作用：

import React from 'react'
import { Button, Checkbox, Icon, Table, Input } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import editableRow from 'hoc/editableRow'

const DataRow = (props) => 
    <Table.Row 
        onClick={props.handleSave}>
        {
            props.children
        }
    </Table.Row>

DataRow.defaultProps = {
    onCreate: value => console.log('100'),
    onEdit: value => console.log(value * 2)
}

export default editableRow()(DataRow)

我提供它的道具，所以它能正常工作：

<DataRow
    onCreate={(value)=>console.log('on create', value*2)}
    onEdit={(value)=>console.log('onEdit', value*3)}
>

Answer 1

这是您将其添加到组件的顺序的原因。所以你需要 onCreate 在 HOC 内部，但是默认的 props 被添加到组件中，在这种情况下它们永远不会通过 HOC。但是，如果您从 HOC 外部添加它们，则可以访问它们：

     ┌──────────────────────────────┐     
     │        {onChange: fn}        │     
     └─────────────┬────────────────┘     
                   │                      
                   │                      
                   │                      
                   │                      
┌──────────────────▼─────────────────────┐
│                                        │
│                 HOC                    │
│                                        │
│                                        │
│        ┌──────────────────────┐        │
│        │       DataRow        │        │
│        │                      │        │
│        │   defaultProps: {    │        │
│        │      onChange: fn    │        │
│        │   }                  │        │
│        └──────────────────────┘        │
└────────────────────────────────────────┘

React HOC 回调不适用于默认道具

React HOC callback not working with default props

javascript

reactjs

recompose

higher-order-components