Javascript onClick和className在reactjs中不起作用

Onclick在此组件中不起作用。这是我第一次遇到这个错误，我尝试过检查代码，我将所有函数绑定到

This

，但是

onClick

方法根本不起作用。我添加到

Col

中的

div

中的任何类名也不会被应用

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Row, Col } from 'antd';
import { safariTypes }  from '../../data/safariTypes';
import uuid from 'uuid/v1';
import '../../App.css';
const ThePeople = './Media/thePeople.jpeg';
const BoraBora = './Media/bora.jpg';
const Aerial = './Media/balloon.jpg';
const Family = './Media/family_small.jpg';
const Honeymoons = './Media/honeymoon_small.jpg';
const Wildlife = './Media/wildlife.jpg';


    class Highlights extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
        this.returnSafariItemsHighlights = this.returnSafariItemsHighlights.bind(this)
        this.show = this.show.bind(this)
    }
show = () => {


     console.log("hey");

 }

    returnSafariItemsHighlights(){

        var Feature = null

        var arr = []
        if(safariTypes){
            safariTypes.slice(0,6).map((item, key) => {
                if(item === 'Aerial e.g Hot air ballons'){
                    Feature = Aerial
                } else if(item === 'Wildlife') {
                    Feature = Wildlife
                } else if(item === 'Family and Holiday') {
                    Feature = Family
                } else if(item === 'Beach Holidays') {
                    Feature = BoraBora
                } else if(item === 'Culture and History') {
                    Feature = ThePeople
                } else if(item === 'Honeymoons'){
                    Feature = Honeymoons
                } 


                arr.push(

                <Col  xs={24} sm={12} md={12} lg={8} xl={8}  key={uuid()} onClick={this.show} >
                <div 
                className="bounceAnimation"  
                style={{ backgroundImage: 'url(' + Feature + ')', 
                backgroundSize: 'cover', 
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat',
                height: '40vh',
                paddingTop: '28vh',
                paddingLeft: '20px',
                paddingRight: '20px'
              }}>

                <div  style={{backgroundColor: "rgb(255, 255, 255, 0.4)", textAlign: "center", fontSize: "25px",padding: "5px", fontFamily: "Lobster", color: "green"}}>

                #{item}

                </div>
                </div>

                </Col>


                )
            })
        }
        return arr
    }
  render() {

    return (
      <div>{this.returnSafariItemsHighlights()}</div>


    );
  }
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“antd”导入{Row，Col}；
从“../../data/safariTypes”导入{safariTypes}；
从“uuid/v1”导入uuid；
导入“../App.css”；
const ThePeople='/Media/ThePeople.jpeg'；
康斯特博拉='/媒体/博拉.jpg'；
const air='./Media/balloon.jpg'；
const Family='./Media/Family_small.jpg'；
const蜜月='/媒体/蜜月_small.jpg'；
康斯特野生动物='/媒体/野生动物.jpg'；
类高亮显示扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
this.returnSafariItemsHighlights=this.returnSafariItemsHighlights.bind（this）
this.show=this.show.bind（this）
}
show=（）=>{
console.log（“嘿”）；
}
returnSafariItemsHighlights（）{
var功能=空
var arr=[]
if（safariTypes）{
safariTypes.slice（0,6）.map（（项，键）=>{
如果（项目=='天线，例如热空气气球'）{
特征=天线
}否则，如果（项目===‘野生动物’）{
特征=野生动物
}else if（项目===‘家庭和假日’）{
特征=族
}否则，如果（项目===‘海滩假日’）{
特征=波拉波拉
}else if（项目===‘文化和历史’）{
功能=人
}否则如果（项目===‘蜜月’）{
功能=蜜月
} 
arr.push(
#{item}
)
})
}
返回arr
}
render（）{
返回(
{this.returnSafariItemsHighlights（）}
);
}
}

似乎列不接受onClick prop，为什么不将

onClick={this.show}

移动到列中的div，如下所示

<Col
  xs={24} sm={12} md={12} lg={8} xl={8}  key={uuid()} >
  <div 
    onClick={this.show}
    className="bounceAnimation"  
    style={{ backgroundImage: 'url(' + Feature + ')', ...}}
  >
     ...
  </div>
</Col>

...

---

我想我发现了一个性能问题，每次组件呈现时，它都会调用

returnSafariItemsHighlights

，在这里，您使用一个键道具填充组件数组，该道具在每次调用函数时生成，当react协调时，它将发现不同的键，在这种情况下，子组件将不会被重用。

您的控制台说什么，告诉我们错误控制台上没有任何内容。此变量来自哪里

if（safariTypes）{

？它是导入的，没有问题，数据是存在的。它只是一些单词的数组。您能显示所有代码吗？

Col

可能来自库，可能不接受

onClick

事件。请参见上面注释中的示例

Col

接受

onClick