所以问题是,我如何从父 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)
这里有一个简化的例子来说明这个概念:
成分:
// 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 组件维护模块化和可配置的结构,同时仍然提供独立设计每个子组件的灵活性。
你可以试试这个方法:
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>
);
};