Javascript 第一次反应，来自角度。CSS网格？

如何设置构件样式以在网格中布局子构件

我一直在尝试多种方法：

方法1：

导入自定义CSS样式表-在父组件中，我导入的样式表是：

Import./style.CSS'

（不是实际的文件，但它是重点。）

目标和应用样式：应该像

一样简单。targetClassName{显示：网格；网格模板列：重复（4,1fr）；}

根据我的经验，它不能进入DOM

方法2：

将样式设置为对象：

conststyle={display:'grid'，gridTemplateColumns:'repeat（4，1fr）}

将内联应用于组件：

由于某种原因，它也不起作用

仅作为一些背景，以下是组件：

import React, {Component} from 'react';
import Computer from './computer';

import './styles/computers.sass';


class Computers extends Component{

  deleteComputer(_id){
    this.props.onDelete(_id);
  }


  render(){
    const compListStyle = {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)'
    }
    let computerList;
    if(this.props.computers){
      computerList = this.props.computers.map(x => {
        console.log(x);
        return(
          <Computer computer={x} onDelete={this.deleteComputer.bind(this)}/>
        )
      })
    }
    return(
      <div className='computers' style={this.compListStyle}>
        {computerList}
      </div>
    );
  }
}

export default Computers;

import React，{Component}来自'React'；
从“./计算机”导入计算机；
导入“./styles/computers.sass”；
类计算机扩展组件{
删除计算机（_id）{
this.props.onDelete（_id）；
}
render（）{
常量compListStyle={
显示：“网格”，
gridTemplateColumns:'重复（4，1fr）'
}
让计算机列出；
如果（这个。道具。计算机）{
computerList=this.props.computers.map（x=>{
控制台日志（x）；
返回(
)
})
}
返回(
{computerList}
);
}
}
导出默认计算机；

您正在styles对象中使用类变量。所以你也应该把它设为1

this.compListStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(4, 1fr)'
}

---

如果使用样式加载器/sass加载器加载样式文件，则第一种方法应该有效

实际上，在react中使用CSS有很多方法，我只是不希望您将样式保存在

render（）中

 const compListStyle = {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)'
    }

class Computers extends Component{ ...}

像这样使用它们

 <div className='computers' style={compListStyle}>
    {computerList}
  </div>

这是最终的代码，非常干净和小

const compListStyle = {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)'
};

class Computers extends Component {
    deleteComputer(_id) {
        this.props.onDelete(_id);
    }
    render() {
        return (
            <div>
                {this.props.computers && this.props.computers.map(x => {
                    console.log(x);
                    return (
                        <div className='computers' style={compListStyle}>
                            <Computer computer={x} onDelete={this.deleteComputer.bind(this)}/>
                        </div>)}
                )}
            </div>
        );
    }
}

export default Computers;

const compListStyle={
显示：“网格”，
gridTemplateColumns:'重复（4，1fr）'
};
类计算机扩展组件{
删除计算机（_id）{
this.props.onDelete（_id）；
}
render（）{
返回(
{this.props.computers&&this.props.computers.map（x=>{
控制台日志（x）；
返回(
)}
)}
);
}
}
导出默认计算机；

这里还有一些提示


很乐意帮忙
const compListStyle = {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)'
};

class Computers extends Component {
    deleteComputer(_id) {
        this.props.onDelete(_id);
    }
    render() {
        return (
            <div>
                {this.props.computers && this.props.computers.map(x => {
                    console.log(x);
                    return (
                        <div className='computers' style={compListStyle}>
                            <Computer computer={x} onDelete={this.deleteComputer.bind(this)}/>
                        </div>)}
                )}
            </div>
        );
    }
}

export default Computers;