Javascript 将Reactjs变量导入Sass//为Sass变量指定Reactjs元素类名

我正在学习一些ReactJS和Sass，想知道是否可以将ReactJS变量导入Sass或为Sass变量指定ReactJS元素类名

我正在做一个愚蠢的报价机，当我点击一个按钮时，我需要不同的元素在同一时间改变为相同的颜色。我已经实现了一个有效的解决方案，但是因为我试图生成一个模块化的代码，所以我不得不使用react上下文和状态。我学到了很多，但我想如果我能实现它们，我想有两种解决方案会更好，这将使代码更加干净，不需要上下文或状态

我搜索了几个小时，但找不到一种方法将Reactjs文件中的变量（当我单击按钮时会发生变化）导入到Sass文件中，以便在那里使用它。大概是这样的：

Reactjs文件：

let num = 0;

function randomNumber() {
  num = Math.floor(Math.random() * (n + 1));
}

render (
  <button onClick={randomNumber()} className={RandomColor}>Button</button> 
)

发现有帖子说我可以将Sass变量导出到Javascript文件中，但当我在Reactjs文件中这样做时，变量是未定义的

在搜索到这种可能性后，我认为另一种通信方式是在单击按钮时更改按钮的类（或其他属性），并将其分配给一个变量，该变量将定义我需要动态更改的属性。大概是这样的：

ReactJs文件：

let num = 0;

function randomNumber() {
  num = Math.floor(Math.random() * (n + 1));
}
render (
  <button id='buttonID' onClick={randomNumber()} className={num}>Button</button> 
)

---

提前谢谢

尝试将随机逻辑保留在React端，并使用SASS定义要从中随机选取的颜色表

此外，将此功能封装到其自己的组件中允许您利用状态来更新样式。另外，您可以根据需要重复使用它

»RandomButton.jsx:

import React from 'react';
import './RandomButton.sass';

class RandomButton extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      colorId: 'color_0'
    };
    this.generateRandomColor = this.generateRandomColor.bind(this);
  }
  
  generateRandomColor = (event, min, max) => {
    let num = Math.floor(Math.random() * (max - min) + min);
    let styleId = `color_${num}`;
    
    this.setState({
      colorId: styleId
    });
    
  }
  
  render() {
    
    return(
      <button 
        id="buttonID" 
        onClick={(event) => this.generateRandomColor(event, 0, 3)} 
        className={`randomButton ${this.state.colorId}`}
      >
        {this.props.title}
      </button>
    )
  }
  
}

export default RandomButton;

.randomButton
  padding: 5px 10px
  border-radius: 3px
  border: 1px solid black

.color_0
  background-color: #A6BF4B
  color: white
  
.color_1
  background-color: #F2F0D5
  color: black
  
.color_2
  background-color: #F2C53D
  color: black
  
.color_3
  background-color: #B1B1AC
  color: black
  
.color_4
  background-color: #668C4A
  color: white

import './your/path/to/RandomButton/RandomButton.jsx';

class App extends React.Component {
  
  render() {
    
    return(
      <div className="App">

        <RandomButton title="Random Button 1" />
        <RandomButton title="Random Button 2" />
        <RandomButton title="Random Button 3" />

      </div>
    )
    
  }
  
}

»导入并添加到您的应用程序：

import React from 'react';
import './RandomButton.sass';

class RandomButton extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      colorId: 'color_0'
    };
    this.generateRandomColor = this.generateRandomColor.bind(this);
  }
  
  generateRandomColor = (event, min, max) => {
    let num = Math.floor(Math.random() * (max - min) + min);
    let styleId = `color_${num}`;
    
    this.setState({
      colorId: styleId
    });
    
  }
  
  render() {
    
    return(
      <button 
        id="buttonID" 
        onClick={(event) => this.generateRandomColor(event, 0, 3)} 
        className={`randomButton ${this.state.colorId}`}
      >
        {this.props.title}
      </button>
    )
  }
  
}

export default RandomButton;

.randomButton
  padding: 5px 10px
  border-radius: 3px
  border: 1px solid black

.color_0
  background-color: #A6BF4B
  color: white
  
.color_1
  background-color: #F2F0D5
  color: black
  
.color_2
  background-color: #F2C53D
  color: black
  
.color_3
  background-color: #B1B1AC
  color: black
  
.color_4
  background-color: #668C4A
  color: white

import './your/path/to/RandomButton/RandomButton.jsx';

class App extends React.Component {
  
  render() {
    
    return(
      <div className="App">

        <RandomButton title="Random Button 1" />
        <RandomButton title="Random Button 2" />
        <RandomButton title="Random Button 3" />

      </div>
    )
    
  }
  
}

import./your/path/to/RandomButton/RandomButton.jsx'；
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}

谢谢你抽出时间。我以类似的方式解决了它，使用state，因为我也需要更改父元素，但我尝试按照您所说的那样，将其封装在button元素中，并将类赋予所有元素。我猜这并不能回答我的问题，但无论如何，谢谢你，我接受你的建议。