コンソールに小道具を記録すると、私は小道具を手に入れません.0.0.2.0

Question

私はCoreLayoutスマートコンポーネントと子としてバナーダムコンポーネントを持っています。

class CoreLayout extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    closeBanner(e, type) { 
     e.stopPropagation() 
     console.log(type) 
    } 

    render() { 
     return (
      <div> 
       <Banner type='bannerA'/> 
       <Banner type='bannerB'/> 
      </div>  
     ) 
    } 
} 

とシンプルなバナーコンポーネント：コード）の

const Banner = ({type, closeBanner}) => { 
    return (
     <div> 
      <span onClick={ (e, type) => closeBanner(e, type) }>close</span> 
      <span>A message</span> 
     </div> 
    ) 
} 

私の問題は、その代わりに、ロギングの「bannerA」または私は決算をクリックして、コンソールに「bannerB」で、Iクリックしたバナーによっては0.0.2.0.0や0.0.3.0.0のようなものがあります。

ただし、バナーコンポーネントでタイプを記録すると、正しいタイプをコンソールに記録できます。

誰でもこの動作について考えていますか？これについての詳細が必要な場合はお知らせください。

Answer 1

問題はここにある：

onClick = {(e, type) => close(e,type)} 

ここonClick = {(e, type) => ... }eとtype、これら2つのパラメータはonClick関数によって渡されます、ここtypeはあなたが親コンポーネントから取得しているタイプと同じにはなりません、タイプparameter nameがonClickになります。あなたがdestructuringprops objectある最初の行で

：

const Banner = ({type, closeBanner}) => { 

このtypeが値を持つことになりますが、あなたは親コンポーネントから渡されました。

はこのようにそれを書く：

const Banner = ({type, closeBanner}) => { 
    return (
     <div> 
      <span onClick={ (e) => closeBanner(e, type) }>close</span> 
      <span>A message</span> 
     </div> 
    ) 
} 

また、あなたが親からcloseBanner機能を渡す必要があります：

<Banner type='bannerA' closeBanner={this.closeBanner}/>