reactjs - "special props warning"不引用 `ref` 也不引用 `key`

Question

我无法在 plunker 中重现它。在此fiddle我的设置与我的项目中的设置完全相同，但存在以下差异:单独的文件和webpack - 但它在那里工作......

在一个文件中我有:

import * as React from 'react';

const Component = function (props) {
    return (
        <div>MyComponent has {props.value} bapples</div>
    )
};


Component.propTypes = {
    value: React.PropTypes.number
};

// export default A;

const HigherOrderComponent = function(props) {
    return (
        <Component {...props} />
    )
};

export default HigherOrderComponent;

然后当我尝试连接到另一个文件中的 redux-store 时

import HigherOrderComponent from './HigherOrderComponent';

export default ReactRedux.connect()(HigherOrderComponent);

我收到special props warning :

Element: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

Element: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

但我根本没有使用 ref 也没有使用 key...我用谷歌搜索过，但只遇到了不相关的问题。

Answer 1

这是我提出的解决方案(可能需要根据您的情况稍作修改):

let props = Object.assign({},this.props)

delete props.key
delete props.ref

return <div> { React.cloneElement(props.children, props) } </div>

因此，在您的 HigherOrderComponent 中，您将执行以下操作(未经测试):

const HigherOrderComponent = function(incomingProps) {
    let props = Object.assign({}, incomingProps)

    delete props.key
    delete props.ref

    return (
        <Component {...props} />
    )
};