我認為我的 css 類已導入，但我已正確導入

Question

這是我一直在從事的漢堡構建器項目，這里我的錯誤是在漢堡構建器控件中使用 css class 文件。

import React from 'react';
import classes from './BuildControls.css';
import BuildControl from './BuildControl/BuildControl';
const controls = [
    {label : 'Salad' , type :'salad'},
    {label : 'Bacon' , type :'bacon'},
    {label : 'Cheese' , type :'cheese'},
    {label : 'Meat' , type :'meat'},
];
const buildControls =(props) => { 
    <div className = {classes.BuildControls}>
        {controls.map(ctrl =>(
            <BuildControl Key ={ctrl.label} label={ctrl.label}/>
        ))}
    </div>
}

export default buildControls; 

錯誤是

./src/components /Burger /BuildControls/BuildControls.js

第 11 行：需要一個賦值或 function 調用，而是看到一個表達式 no-unused-expressions

Answer 1

const buildControls =(props) => {
return (
 <div className = {classes.BuildControls}>
    {controls.map(ctrl =>(
        <BuildControl Key ={ctrl.label} label={ctrl.label}/>
    )))}
 </div>
}

您需要返回元素。

Answer 2

您可以按如下方式導入 css：

import './BuildControls.css';

然后使用 class 如下：

<div className="BuildControls">
</div>

注意：我假設您在 css 文件中的類名是BuildControls