如何在 tailwindcss 中将父级的网格属性应用到特定子级

Question

我们对 React 项目使用配置文件的模块化方法。所以事情是这样的： 绘制输入字段的组件 -> 配置文件，它有一个父 div 并在其中导入了字段文件 -> fields 文件，其中包含字段及其 ID、值等。

所以问题是，我如何从父 div 中选择特定的子元素并给出例如

col-span-n

？

我希望它看起来像这样：

grid grid-cols-1 gap-6 md:grid-cols-3 xl:grid-cols-8 mb-6 (and here classnames that will change particular child)

Answer 1

如果我理解正确的话，您希望基于 React 项目中的模块化配置方法，将特定的样式或类应用于父 div 中的各个子项。实现此目的的一种方法是将附加道具传递给子组件，并使用这些道具有条件地应用样式或类。

这里有一个简化的例子来说明这个概念：

成分：

// Parent component
import React from 'react';
import ChildComponent from './ChildComponent';
import config from './config';

const ParentComponent = () => {
  return (
    <div className="grid grid-cols-1 gap-6 md:grid-cols-3 xl:grid-cols-8 mb-6">
      {config.map((childConfig, index) => (
        <ChildComponent key={index} colSpan={childConfig.colSpan} />
      ))}
    </div>
  );
};

export default ParentComponent;

配置：

// Config file
const config = [
  { colSpan: 'col-span-2' },
  { colSpan: 'col-span-1' },
  { colSpan: 'col-span-3' },
  // Add more configurations as needed
];

export default config;

子组件：

// Child component
import React from 'react';

const ChildComponent = ({ colSpan }) => {
  return <div className={`child ${colSpan}`}>Child Content</div>;
};

export default ChildComponent;

在此示例中，

ParentComponent映射配置数组并将colSpan值传递给每个ChildComponent。然后，ChildComponent 使用此属性动态设置特定子组件的类。

您可以根据您的特定需求自定义配置，这种方法允许您为 React 组件维护模块化和可配置的结构，同时仍然提供独立设计每个子组件的灵活性。

Answer 2

你可以试试这个方法：

    const ParentComponent = () => {
      return (
        <div className="grid grid-cols-1 gap-6 md:grid-cols-3 xl:grid-cols-8 mb-6">
          {config.map((childConfig, index) => (
           <div key={index} className="col-span-1 md:col-span-2 lg:col-span-3">
              <ChildComponent   />
           </div>
           
          ))}
        </div>
      );
    };