javascript - React HOC DOM 属性正在触发 'Unknown event handler property'

我刚刚用 recompose 做了一个 HOC，但由于某种原因，所有传递下来的 props 都触发了一个 React 警告。

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

我的所有属性都具有相同的语法(以小写开头，然后是大写:lowerUpper)。当然，如果我把它写成全小写，那么它不会触发任何警告，但是如果我使用带有 recompose 的 HOC，我是否应该将所有 Prop 都写成小写？

我的 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...等]

我该如何解决这个错误？它真的很烦人。

最佳答案

该问题与 Recompose 无关。根据 the React doc :



您应该只将有效的 props 传递给 DOM 元素。例如:

不要

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

做

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

the React doc 中有更多示例。

关于javascript - React HOC DOM 属性正在触发 'Unknown event handler property'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50170127/