Question

head: {
    className: '',
    columns: ['Name', 'Title', 'Position', 'Company'],
    center: true,
  },

cp-table-head--center {
  text-align: center;
}

上面是我在React中的表组件的Javascript。
下面是修饰符的相应CSS

有谁知道如何将修饰符仅应用于数组中的某些头项目？感谢。

Answer 1

我建议使用'classnames'包在React中应用BEM，因为在组件中添加条件类/修饰符要容易得多。但是要回答你的问题，我可能会做这样的事情：

import React from 'react';
import classnames from 'classnames';

const TableHead = ({ title, center = false }) => {
  const styling = classnames({
    'cp-table-head': !center,
    'cp-table-head--center': center,
  });

  return <th className={styling}>{title}</th>
}

const Table = () => {
  const columns = ['Name', 'Title', 'Position', 'Company'];
  const headers = columns.map((title) => (
    <TableHead key={title} title={title} center />
  ));

  return (
    <table>
      <thead>
        <tr>
          {headers}
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>body..</td>
        </tr>
      </tbody>
    </table>
  )
}

此示例相对简单，因此您可以选择仅使用三元运算符：

className={`cp-table-head${center ? '--center' : ''}`}

回答有关居中特定标题项的问题。您可以将以上TableHead组件与..：

一起使用

...
const Table = () => {
  const columns = [
    {
      title: 'Name',
      center: true,
    },
    {
      title: 'Title',
      center: false,
    },
    {
      title: 'Position',
      center: true,
    },
    {
      title: 'Company',
      center: false,
    }
  ];

  const headers = columns.map((header, index) => (
    <TableHead key={index} title={header.title} center={header.center} />
  ));
...

将修饰符类应用于数组中的指定项[React]

1 个答案: