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

如何更改React中导入组件的CSS属性？我试图创建一个函数，其工作原理如下：onclick=增加所单击组件的大小，当单击时，它会恢复正常

在使用vanilla javascript直接访问DOM之前，我已经实现了这一点，但我不知道如何在react中实现这一点

目前，我有一个空函数

function appcardWasClicked() {

}

div中的组件设置为onClick={appcardWasClicked（）}：

index.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
      }
    }
  }
`

从“React”导入React
从“盖茨比”导入{Link，graphql}
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
从“../components/Home/Bottom nav”导入底部
从“../components/Home/first段落”导入第一段落
从“../components/Home/Appfeatures”导入Appfeatures
从“../components/Home/app works”导入Appworks
从“../components/Home/extra features”导入Extrafeatures
从“../components/Home/app review”导入Appreview
从“../components/Home/app review card”导入Appreviewcard
从“../components/Home/Header”导入标题
常量页面索引=（{data，location}）=>{
const siteTitle=data.site.siteMatadata.title
函数appcardwisclicked（）{
}
返回(
)
}
导出默认页面索引
export const pageQuery=graphql`
质疑{
场地{
站点元数据{
标题
}
}
}
`

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

import React，{Component}来自“React”
从“../../images/imf.jpg”导入person1
导出类Appreviewcard扩展组件{
render（）{
返回(
约翰迪奥
ABC公司首席执行官

Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad
)
}
}
导出默认Appreviewcard

您需要通过函数访问单击的div。为此，您需要传递一个事件，如下面的事件：

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

---

如果你将AppCard移动到Appreviewcard中，它应该像香草一样工作，我想````好的，我将它移动到了AppReview card中，但是如何更改高度和宽度的css属性呢。比如语法是什么样子的。所以在vanilla javascript中，它看起来像是document.getElementById（“lefteye”）.style.backgroundColor=“purple”style.backgroundColor='blue'（不确定这是否是正确的语法，例如，如果是），您可以尝试

e.target.setAttribute（“style”，“background color:blue；”）

代码

const元素=e.target.setAttribute（“style”，“background color:blue；”）没有改变任何东西。我还试着把它放到一个新行中，并保留第一行
e.target.setAttribute（“style”，“background color:blue；”）并使用元素
element.setAttribute（“样式”，“背景色：蓝色；”）没有一个在click上工作。您可以通过
console.log（e.target）
获取元素吗？当我在函数中执行
console.log（e.target）
时，当我单击Appreviewcards时，console中没有显示任何内容
<Appreviewcard onClick={(e) =>appcardWasClicked(e)}/>

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

  }