方法1：

Question

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

我一直在尝试多种方式：

方法1：

导入自定义CSS样式表 - 在父组件中，我使用以下内容导入样式表：border（不是实际文件，但它得到了重点。）
定位和应用样式：应该像import './style.css'

根据我的经验，它并没有进入DOM。

方法2：

将样式设置为对象：.targetClassName{display:grid;grid-template-columns: repeat(4,1fr);}
内联应用于组件：const style = { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)'};

也不起作用。

仅仅是为了某些背景，这是组件：

<div className='items' style={this.style}></div>

Answer 1

您正在使用样式对象中的类变量。所以你也应该把它设置为一个。

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

如果使用style-loader / sass-loader加载样式文件，则第一个方法应该正常工作。

Answer 2

实际上，有很多方法可以使用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

第一次反应，来自Angular。 CSS网格？

方法1：

方法2：

2 个答案: