Question

我无法在plunker中重现它。在这个fiddle中，我的设置与我在项目中的设置完全相同，具有以下差异：separate files＆amp; 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：

元素：ref不是道具。尝试访问它将导致返回undefined。如果需要在子组件中访问相同的值，则应将其作为不同的prop传递。

元素：key不是道具。尝试访问它将导致返回undefined。如果需要在子组件中访问相同的值，则应将其作为不同的prop传递。

但我根本没有使用ref或key ...我已经使用Google搜索，但我只是遇到了无关紧要的问题。

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

“特殊道具警告”，不引用`ref`或`key`

1 个答案: