React HOC DOM属性正在触发“未知事件处理程序属性”

Question

我只是用重新合成进行了HOC，但由于某种原因，所有传递下来的道具都触发了反应警告。

Warning: Unknown event handler property `onSaveChanges`. It will be ignored.

我所有的属性都具有相同的语法（以小写开头，然后是大写：lowerUpper）。当然，如果我将它全部写成小写，那么它不会触发任何警告，但是如果我将HOC与recompose一起使用，我应该将所有道具都写成小写吗？

我的HOC：

import React from 'react'

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

const editableCell = (defaults) => 
    compose(
        withStateHandlers(
            { isEditing: false, value: ''},
            {
                toggleEditing: ({ isEditing, inputValue }) => defaultValue => ({
                    isEditing: true,
                    inputValue: isEditing ? inputValue : defaultValue
                }),
                onChange: () => event => ({
                    inputValue: event.target.value
                }),
                deactiveCell: () => () => ({
                    isEditing: false
                })
            }
        ),
        withHandlers({
            handleSave: ({
                isEditing,
                inputValue,
                onSaveChanges,
                deactiveCell,
            }) => event => {
                event.preventDefault()
                //can validate before save...
                deactiveCell()
                return onSaveChanges(isEditing, inputValue) 
            }
        })
    )

export default editableCell

基本上我所有的属性都会触发此警告（无论是函数还是简单的原语，基本上都是[isEditing，inputValue，onChange，deactivateCell，onSaveChanges，handleSave ...等）

我应该如何解决这个错误？真烦人。

Answer 1

该问题与“重组”无关。根据React文档：

如果您尝试使用React无法识别为合法DOM属性/属性的道具来渲染DOM元素，则会触发unknown-prop警告。您应该确保您的DOM元素周围没有虚假的道具。

您应该仅将有效道具传递给DOM元素。例如：

别

function MyDiv(props) {
  return <div {...props} />
}

做

function MyDiv({ onSaveChanges, inputValue, /** other invalid props **/, ...otherProps}) {
  return <div {...otherProps} />
}

在React doc中有更多示例。