javascript - 如何正确使用 HOC 和重组

Question

我最近才开始使用 React 并阅读了有关 HOC 的内容。

我想做类似的事情:使容器可编辑。 我的“解决方案”(因为它还不能正常工作。)

可编辑行(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, ...)}

更新:

我的问题是我无法以任何方式向我的组件发送任何“处理程序”。我这样试过:

<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);

每当您使用HOC组合您的组件时，您的 HOC 将拥有您提供给该组件的 props导出 composed 组件。

因此，在您的 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 和 处理程序。我希望这对您有所帮助，如果您仍然遇到困难，请告诉我。

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
    }
})