「ref」も「key」も参照しないで「特別な小道具の警告」

Question

私はプランナーでそれを再現することができません。その後

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; 

：まだそこに働いている私が持っている一つのファイルに...

を - separate files & webpack：私はこれらの違いに私のプロジェクトを持っているように、このfiddleでは、私は非常に同じ設定を持っています

：私は special props warningを受け取る

import HigherOrderComponent from './HigherOrderComponent'; 

export default ReactRedux.connect()(HigherOrderComponent); 

別のファイルにredux-storeに接続しよう

エレメント：refは小道具ではありません。それにアクセスしようとするとundefinedが返されます。子コンポーネント内の同じ値にアクセスする必要がある場合は、別の小道具として渡す必要があります。

エレメント：keyは小道具ではありません。それにアクセスしようとするとundefinedが返されます。子コンポーネント内の同じ値にアクセスする必要がある場合は、別の小道具として渡す必要があります。

しかし、私は全くrefもkeyを使用していない...私はGoogleで検索しましたが、私は無関係な問題を打ちます。ここで

Answer 1

は私が思いついた解決策は、（少しあなたのコンテキストに変更する必要があります）です：あなたHigherOrderComponentあなたが（未テスト）これを行うだろうではそう

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

delete props.key 
delete props.ref 

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

：

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

    delete props.key 
    delete props.ref 

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