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

我最近才刚启动React，并阅读了有关HOC的信息。

我想做类似的事情：使容器可编辑。
我的“解决方案”（因为它尚无法正常工作。）

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

我的DataRow：

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还是使用其OWN DEFAULTs而不是我传递给它的参数]

帮助我，请了解它们的工作原理...：D

最佳答案

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;

当您使用同时可用于withHandlers和withStateHandler的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
    }
})

关于javascript - 如何使用HOC并正确重组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50152970/