1

私はreact-starter-kitを使用して、次のようなリスト コンポーネントを作成しています。

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './CommandList.css';

const CommandList = () => {
  return (
    <ul className={s.commandList}>
      {data.commands.map((command, index) => (
        <li 
          key={index}
          className={s.commandListItem}>
          {command.command}
        </li>
      ))} 
    </ul>
  );
};

export default withStyles(s)(CommandList);

「アクティブな」クラスをアイテムに追加しようとしていliますが、その方法がわかりません。ライブラリを使用してみましclassnamesたが、スタイルから 2 番目のクラスを取得する方法がわかりません。文字列「アクティブ」を渡すだけでは、スタイルはインポートされません。

import cx from 'classnames';

<li className={cx(s.commandListItem, {'active': command.active })}>

私の質問は、次のようなことをどのように行うかです。

<li className={cx(s.commandListItem, {s.active: command.active })}>
4

3 に答える 3

0

React のclassNameは String であり、すべてのオブジェクトを String に変換する必要があります

まず、クラスに割り当てたいクラスの配列を作成します

次に、クラス名の配列を文字列に変換します

className={[s.commandListItem, 'active'].join('')}
于 2018-09-17T14:46:27.580 に答える