如何使用 Reactjs 使用 classNames 呈現條件

Question

我正在嘗試使用classNames在一行中替換下面的條件。

我的問題是，由於div等原因，我不確定編寫代碼的正確方法是什么......

我有以下代碼：

有條件的

const { pageTitle, removeTitle = false } = props;   # destructuring

let result;

if(removeTitle){
  result = <div className="header-without-title">{pageTitle}</div>;
} else {
  result = <div className="header-with-title">{pageTitle}</div>;
}

return (<div className="result-title">{result});

};

如果div不存在，我可以寫這樣的東西......

const result = classNames({"header-without-title": removeTitle, "header-title": !removeTitle});

但是我現在不確定我是否有div ，我會很感激這里的一些幫助......

JSX之外的解決方案將非常有幫助

Answer 1

return (
    <div className="result-title">
        <div className={`header-${removeTitle ? 'without-title' : 'with-title'}`}>{pageTitle}</div>
    </div>
);

或者使用https://github.com/JedWatson/classnames

return (
    <div className="result-title">
        <div className={classNames({ 'header-without-title': removeTitle, 'header-with-title': !removeTitle })}>
            {pageTitle}
        </div>
    </div>
);

編輯：JSX 之外的解決方案

const result = (
    <div className={classNames({ 'header-without-title': removeTitle, 'header-with-title': !removeTitle })}>
        {pageTitle}
    </div>
);

return (
    <div className="result-title">
        {result}
    </div>
);

Answer 2

您可以內聯 classNames function

const { pageTitle, removeTitle = false } = props;

const result = classNames({"header-without-title": removeTitle, "header-title": !removeTitle});

return (
  <div className="result-title">
    <div className={result}>
      {pageTitle}
    </div>
  </div>);
);

Answer 3

對此有幾個答案。 視情況而定

React 中兩個類之間的三元關系：

<div className={`header-${removeTitle ? 'without-title' : 'with-title'}`}>

class 或 React Javascript 中的 null 之間的三進制：

<div className={removeTitle ? 'without-title' : null}>

在 React Javascript 和 Typescript 中渲染 class 或不渲染之間的三元組：

<div className={...(removeTitle ? { className: 'without-title' } : {})}>