如何在 React 中更改导入组件的 CSS 属性

Question

如何在 React 中更改导入组件的 CSS 属性？ 我正在尝试制作一个 function，其工作方式如下： onclick = 增加单击的组件的大小，单击后它恢复正常。

在直接访问香草 javascript 中的 DOM 之前，我已经实现了这一点，但我不知道如何在反应中做到这一点。

目前，我有一个空的 function

function appcardWasClicked() {

}

并将 div 中的组件设置为 onClick={appcardWasClicked()}：

<div className="Appreviewcard-index">
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
  </div>

索引.js

import React from "react"
import { Link, graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Bottom from '../components/Home/bottom-nav'
import Firstparagraph from '../components/Home/first-paragraph'
import Appfeatures from '../components/Home/app-features'
import Appworks from '../components/Home/app-works'
import Extrafeatures from '../components/Home/extra-features'
import Appreview from '../components/Home/app-review'
import Appreviewcard from '../components/Home/app-review-card'
import Header from '../components/Home/header'





const PageIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title
  
  function appcardWasClicked() {
    
  }

  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="All posts" />
      <Header />
      <Firstparagraph />
      <Appfeatures />
      <Appworks />
      <Extrafeatures />
      <Appreview />
      <div className="Appreviewcard-index">
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
      </div>
      <Bottom />
    </Layout>
  )
}

export default PageIndex


export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

app-review-card.js

import React, { Component } from 'react'
import person1 from "../../images/myself.jpg"



export class Appreviewcard extends Component {
    render() {
        return (
            <div className="Appreviewcard">
                <div className="Appreviewcard-main">
                    <div className="Appreviewcard-main-picture">
                        <img src={person1} alt="person" className="Appreviewcard-main-picture-img"/>
                    </div>
                    <div className="Appreviewcard-main-text"> 
                        <h1 className="Appreviewcard-main-text-h1">John Deo</h1>
                        <p className="Appreviewcard-main-text-h3">CEO, ABC Company</p>
                    </div>
                </div>
                <div className="Appreviewcard-secondary">
                    <p className="Appreviewcard-secondary-h2">Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad</p>
                </div>
            </div>
        )
    }
}

export default Appreviewcard

Answer 1

您需要通过 function 访问 Clicked div。为此，您需要传递如下事件：

<Appreviewcard onClick={(e) =>appcardWasClicked(e)}/>

还接收该事件并从中获取元素，然后像以前那样使用 vanila js 应用 css。

function appcardWasClicked(e) {
    const element = e.target;
    //here write your desired css with vanillaJs

  }