Question

我有一个反应组件，我在点击div时尝试更改css的背景颜色。

我知道你可以在组件中设置颜色，但是我多次使用这个组件，并且不要用不同的颜色制作多个组件文件，即使我这样做了，我很好奇除了这个事实

如何通过组件访问（甚至是console.log以自行计算）css文件及其属性？提前谢谢。

Answer 1

您可以将所需的背景颜色作为道具传递，并将内部状态与onClick处理程序一起使用。

<强> Container.js

import React from 'react';
import ClickableDiv from './ClickableDiv';    

const Container = () => (
  <ClickableDiv backgroundColor="#FF0000">
    <p>This is my text.</p>
  </ClickableDiv>
);

export default Container;

<强> ClickableDiv.js

import React, { Component } from 'react';

class ClickableDiv extends Component {
  constructor() {
    super();
    this.state = {};
    this.handleDivClick = this.handleDivClick.bind(this);
  }

  handleDivClick() {
    const { backgroundColor } = this.props;
    if (backgroundColor) this.setState({ backgroundColor });
  }

  render() {
    const { backgroundColor } = this.state;
    return (
      <div style={{ backgroundColor }} onClick={this.handleDivClick}>
        {this.props.children}
      </div>
    );
  }
}

export default ClickableDiv;

Answer 2

如果要在.css / .scss文件中保留所有背景颜色样式，则需要使用良好的className策略将样式链接到组件。这是我的建议：

<强> styles.scss

.blue {
  background-color: blue;

  &.clicked {
    background-color: red;
  }
}

<强> Container.js

import React from 'react';
import ClickableDiv from './ClickableDiv.js';

const Container = () => (
  <ClickableDiv className="blue">
    <p>This is my text.</p>
  </ClickableDiv>
);

export default Container;

<强> ClickableDiv.js

import React, { Component } from 'react';

class ClickableDiv extends Component {
  constructor() {
    super();
    this.state = { clicked: false };
    this.handleDivClick = this.handleDivClick.bind(this);
  }

  handleDivClick() {
    this.setState({ clicked: true });
  }

  render() {
    const divClassName = [this.props.classname];
    if (this.state.clicked) divClassName.push('clicked');
    return (
      <div className={divClassName.join(' ').trim()} onClick={this.handleDivClick}>
        {this.props.children}
      </div>
    );
  }
}

export default ClickableDiv;

呈现标记

未点击：

<div class="blue"><p>This is my text.</p></div>

已点击：

<div class="blue clicked"><p>This is my text.</p></div>

Answer 3

最好制作外部css文件并在该文件中编写css代码，然后在index.html中导入该文件

如何使用react访问css / scss？

3 个答案:

呈现标记