1

我用 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)}
>
4

1 回答 1

3

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

     ┌──────────────────────────────┐     
     │        {onChange: fn}        │     
     └─────────────┬────────────────┘     
                   │                      
                   │                      
                   │                      
                   │                      
┌──────────────────▼─────────────────────┐
│                                        │
│                 HOC                    │
│                                        │
│                                        │
│        ┌──────────────────────┐        │
│        │       DataRow        │        │
│        │                      │        │
│        │   defaultProps: {    │        │
│        │      onChange: fn    │        │
│        │   }                  │        │
│        └──────────────────────┘        │
└────────────────────────────────────────┘
于 2018-05-03T18:56:36.377 回答