从 ReactJs 中的函数更改 css 样式

Question

当我们尝试更新 class 的样式时，我们在 jquery 的函数中使用 css() 方法所以我想在 Reactjs 中更新 class 的样式。帮我做 React 的新手

这是我正在尝试做的事情

    class Someclass extends Component {
      functionA= () =>{
          this.functionB();
      }
      functionB = () =>{
           //Here i want to update styles
          this.divstyle = {
          width: 80%;
          }
}
    render(){
     return(
       <div className="div_wrapper" onLoad={this.functionA()}>
          <div clasName="innerDiv" style={this.divstyle}></div>
       </div>
     )
    }
}
export default Someclass;

Answer 1

您需要像下面那样为 divstyle 定义状态

class Someclass extends Component {
      state = {
        divstyle : { color: 'blue' }
      }
      functionA= () =>{
          this.functionB();
      }
      functionB = () =>{
          // Call setState method to update the state.
          this.setState({
           divstyle : {
             ...this.state.divstyle,
              width: 80%
           })
   }
    render(){
     return(
       <div className="div_wrapper" onLoad={this.functionA()}>
          // Now add this.state.divstyle in style property to access styles
          <div clasName="innerDiv" style={this.state.divstyle}></div>
       </div>
     )
    }
}
export default Someclass;

从 ReactJs 中的函数更改 css 样式

Change css styles from a function in ReactJs

styling

reactjs