React HOC callback не работает с реквизитами по умолчанию - PullRequest
Новая
       31

React HOC callback не работает с реквизитами по умолчанию

0 голосов
/ 03 мая 2018

Я сделал простой 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)}
>

1 Ответ

0 голосов
/ 03 мая 2018

Это причина заказа, который вы добавляете в компонент. Таким образом, вам нужно onCreate внутри HOC, но реквизиты по умолчанию добавляются к компоненту, в этом случае они никогда не проходят HOC. Но если вы добавите их извне, HOC сможет получить к ним доступ: 

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