Reactjs 如何使用钩子将样式应用于React js中的函数

我正在做一个React项目，当我点击按钮时，我有一个按钮，然后我必须应用底部边距：100px。我试图实现这一点，但它显示出一些错误，所以请帮助我解决这个错误

这是我的密码

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [style, setStyle] = useState(null)

  const applyStyles = () => {
    style={
      marginBottom: '100px'
    }
  }
  return (
    <div className='container'>
      <div className='row'>
        <div className='col-12'>
          <div className='first'>
             <button onClick={applyStyles} className='btn btn-primary'>Click here</button>
          </div>
          <div className='second'>
            <div className='box'></div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

import React，{useState}来自“React”；
导入“/App.css”；
常量应用=（）=>{
常量[style，setStyle]=useState（null）
常量applyStyles=（）=>{
风格={
marginBottom：“100px”
}
}
返回(
点击这里
)
}
导出默认应用程序

const-App=（）=>{
常量[style，setStyle]=useState（null）
常量applyStyles=（）=>{
固定方式({
marginBottom：“100px”
});
}
返回(
点击这里
)
}

---

但这并不是最好的做法。您应该查看高阶组件，例如。

您的方法与react行为不匹配。 就这样做吧。有两个css类

.btn-clicked {
  margin-bottom: '100px'
}

在JSX中

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [style, setStyle] = useState(null)
  const [clicked, setClicked] = useState(false)

  const applyStyles = () => {
    style={
      marginBottom: '100px'
    }
  }
  return (
    <div className='container'>
      <div className='row'>
        <div className='col-12'>
          <div className='first'>
             <button onClick={() => setClicked(true)} className={`btn btn-primary ${clicked ? 'btn-clicked': ''}`}>Click here</button>
          </div>
          <div className='second'>
            <div className='box'></div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

import React，{useState}来自“React”；
导入“/App.css”；
常量应用=（）=>{
常量[style，setStyle]=useState（null）
const[clicked，setClicked]=useState（false）
常量applyStyles=（）=>{
风格={
marginBottom：“100px”
}
}
返回(
setClicked（true）}className={`btn btn primary${clicked？'btn clicked'：''}}}>单击此处
)
}
导出默认应用程序

您不需要在React中手动设置状态，而是使用状态设置功能（在本例中为

setStyle

）。你应该做一些关于状态和状态管理的基本教程，这是一个重要的基础管理onclick中的切换状态，然后根据状态有条件地设置按钮上的样式道具

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [style, setStyle] = useState(null)
  const [clicked, setClicked] = useState(false)

  const applyStyles = () => {
    style={
      marginBottom: '100px'
    }
  }
  return (
    <div className='container'>
      <div className='row'>
        <div className='col-12'>
          <div className='first'>
             <button onClick={() => setClicked(true)} className={`btn btn-primary ${clicked ? 'btn-clicked': ''}`}>Click here</button>
          </div>
          <div className='second'>
            <div className='box'></div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App