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

Question

我正在学习一些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文件：

//somehow import num
$color: blue, yellow, green, red...;
$i = num
.RandomColor {
background-color: nth($color, $i);
}

发现有帖子说我可以将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> 
)

Sass文件：

$color: blue, yellow, green, red...;
//something like this
$i = .class of #buttonID
.RandomColor {
background-color: nth($color, $i);
}

提前感谢！

Answer 1

尽量保持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;

»随机按钮.sass:

.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>
)

}

}