如何正确使用 HOC 和重组

Question

我最近才开始使用 React 并了解了 HOC。

我想做类似的事情：使容器可编辑。我的 'solution'（因为它还不能正常工作。）

editableRow (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 => {
                console.log('handling...')
                if (isEditing) {
                    const entry = list && list.find(entry => entry.id === editingId)
                    return onEdit(entry.id, values) 
                } else return onCreate(values)
            }
        })
    )

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>
        {
            props.children
        }
    </Table.Row>

export default editableRow()(DataRow)

我的组件将接收我用 HOC 创建的函数和状态，但出于某种原因我无法传递任何东西（比如调用回调 [onEdit，onCreate]）。难道没有更好的方法来调用 handleSave 而不是 onSubmit={()=>props.handleSave(props1, props2, ...)}

更新：

嗯，我的问题是我无法以任何方式向我的组件发送任何 'handler'。我试过了：

<Table.Row onClick={()=>props.handleSave(
        false,
        false,
        props.onCreate,
        props.onEditing,
        props.list
    )}>
        {
            props.children
        }
    </Table.Row>

但是我的 HOC 的 handleSave 只是使用它自己的默认值。我无法联系到他们，所以我无法将任何处理程序传递给它。我的猜测是我在某处犯了一个非常基本的错误，但不知道在哪里 :D

[就像我保存字段的时候。这就是为什么我得到那些 onEditing、onCreating 事件，但即使我传递了它们，我的 HOC 也只是使用它自己的默认值而不是我传递给它的参数]

请大家帮助我了解这些是如何工作的...:D

Answer 1

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

const DataRow = props => {
    const values = {
        isEditing: false,
        editingId: false,
        onEdit: props.onCreate,
        onCreate: props.onEditing,
        list: props.list,
    };

    return (
        <Table.Row onClick={() => {props.handleSave(values)}}>
            {props.children}
        </Table.Row>
    );
}

export default compose(editableRow)(DataRow);

每当您 compose 您的组件与 HOC 时，您的 HOC 将具有您在导出 时提供给此组件的 props组成 组件。

因此，在您的 HOC 中，您可以访问像这样传递的 props：

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

const editableRow = () =>
    compose(
        withStateHandlers(
            { isEditing: false, editingId: null },
            {
                toggleEditing: ({ isEditing, editingId }) => entryId => ({
                    isEditing: !isEditing,
                    editingId: isEditing ? null : entryId
                }),
                handleSave: (state, props) => values => {
                    console.log('handling...')
                    if (isEditing) {
                        const list = values.list;
                        const entry = list && list.find(entry => entry.id === editingId)
                        return props.onEdit(entry.id, values) 
                    } 
                   return props.onCreate(values)
                }
            }
        ),
    )

export default editableRow;

在使用 withStateHandler 时不必明确使用 withHandlers，它可用于 state 和 handlers。希望这对您有所帮助，如果您仍然遇到困难，请告诉我。

withStateHandler(arg1: an object or a function to set initial state, {
    callback: (state, props) => callbackValues => {
        //call any callback on props
        props.handleSave(); // or props.onCreate() etc.
        //return desired state from here
    }
})

如何正确使用 HOC 和重组

How to use HOC and recompose properly

javascript

callback

higher-order-functions

reactjs

higher-order-components