reactjs - 如何通过代码更改reactjs组件的样式

Question

我需要更改 react 组件的某些子组件的样式。像这样的东西:

import React, { Component } from 'react';

class Parent extends Component {
   onClickHandler = (event) => {
      this.props.children[0].props.style.marginLeft = "-100%";
   }
   render() {
      <div onClick={this.onClickHandler}>
         {this.props.children}
      </div>
   }
}

export default Parent;

我得到的错误是:

TypeError: Cannot add property marginLeft, object is not extensible

你能帮帮我吗？
非常感谢 !!

Answer 1

你得到的错误是因为你不能修改 Prop ，因为它们是不可变的。可以使用普通 CSS 和简单的状态管理来完成更简单的方法。
使用这种技术，您需要一个状态变量来知道何时添加类修饰符。该类修饰符负责覆盖子组件的样式。
JS 看起来像这样:

import React, { Component } from "react";

class Parent extends Component {
  constructor() {
    this.state = {
        bigMargin: false
    };
  }

  onClickHandler = (event) => {
      event.preventDefault();
      this.setState({ bigMargin: true });
  };

  render() {
    return (
        <div className={`parent-class ${bigMargin && 'big-margin'}`} onClick={this.onClickHandler}>
            {this.props.children}
        </div>
    );
  }
}

export default Parent;

CSS 可以像这样简单(或者像您想要的那样复杂)

.big-margin:first-child {
  margin-left: -100%;
}