【问题标题】：First Time React, Coming from Angular. CSS Grid?第一次反应，来自 Angular。 CSS 网格？
【发布时间】：2018-08-18 07:25:15
【问题描述】：

如何设置组件的样式以在网格中布置子组件？

我一直在尝试多种方式：

方法一：

导入自定义 CSS 样式表 - 在父组件中，我正在导入样式表：import './style.css'（不是实际文件，但它是重点。）
定位和应用样式：应该像.targetClassName{display:grid;grid-template-columns: repeat(4,1fr);} 一样简单

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

方法二：

将样式设置为对象：const style = { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)'};
对组件应用内联：<div className='items' style={this.style}></div>

由于某种原因无法正常工作。

只是为了一些背景，这是组件：

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;

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您正在样式对象中使用类变量。因此，您也应该将其设置为 1。

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

如果您使用 style-loader/sass-loader 加载样式文件，第一种方法应该可以工作。

【讨论】：

很乐意提供帮助

【解决方案2】：

实际上，有很多方法可以在 react 中使用 CSS 我只是不希望您将样式保留在 render() 将其排除在组件之外

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

class Computers extends Component{ ...}

并像使用它们一样

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

当你迭代数据时，不要将它们保存在render()

   {this.props.computers && this.props.computers.map(x => {
                console.log(x);
                return (
                <div>
                <Computer computer={x} onDelete={this.deleteComputer.bind(this)}/>
                </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;

这里有一些提示

ReactJS Folder structures

Handle hundreds of images in ReactJS

【讨论】：