Day 06 - 那些~帮助开发的套件

如果有错误，欢迎留言指教~ Q_Q

classnames: 可以依照逻辑条件的将 className 动态是否显示

classnames() 可以传入N个 string 或 object，根据 component 的 state 或是 props 来改变状态，就可以串成想要显示的 className 们

基本用法

// 可以传入 string 或是 object
classNames('foo', { bar: true }); 
// => 'foo bar'

// 可以传入 array
// object 的 value 如果是 falsy 值，则不会显示
let arr = ['b', { c: true, d: false }];
classNames('a', arr); 
// => 'a b c'

// 也可以组合模板文字
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });
// => 'btn-primary'

范例

import cx from 'classnames';

const App = ({ children }) => {
    const [isShowArrow, setIsShowArrow] = useState(false);

    return (
        <div className={cx('arrow', { 'is-show': isShowArrow })}
          {children}
        </div>
      );
}

import cx from 'classnames';

const App = ({ children }) => {
    const leftArrowClass = cx(
        'left-arrow',
        { hidden: !hasLeftArrow }
    );

    return (
        <div className={leftArrowClass}
          {children}
        </div>
      );
}

如果使用 css-modules，则将其 bind 使用

import classnames from 'classnames/bind';
import { tabHeaderStyle } from './Tab.style';

const cx = classnames.bind(tabHeaderStyle);

const App = ({ name }) => {
    return (
        <a className={cx('tab', {'isActive': true })}>
            {name}
        </a>
    );
}

idx: 帮助更方便的遍历 object 和 array 的属性

帮你简化需要判断过程中的值是否存在，如果中间属性为 null 或未定义，则 return

import idx from 'idx';

const news = idx(data, _ => _.data.items) || {};

const quotes: IAdAndNewProps[] = idx(data, _ => _.data.items.data);