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'记录到控制台，而是根据我点击的横幅看到0.0.2.0.0或0.0.3.0.0之类的内容。 / p>

但是，如果我在Banner组件中记录类型，则可以将正确的类型记录到控制台。

有没有人对这种行为有所了解？如果您需要更多详细信息，请与我们联系。

Answer 1

问题在这里：

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

onClick = {(e, type) => ... }此处e和type，这两个参数将由onClick函数传递，此处type与类型不同您从父组件获取，类型将只是parameter name函数中的onClick。

在第一行，您destructuring：props 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}/>

当我将道具记录到控制台时，我没有获得道具但是.0.0.2.0

1 个答案: