如何使用类名使用 Reactjs 呈现条件条件

Question

我试图用一行替换下面的条件。classNames我的问题是，我不确定编写代码的正确方法是什么，因为等等...div我有以下代码：有條件的const { pageTitle, removeTitle = false } = props;   # destructuringlet 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});};如果不存在，我可以写这样的东西...divconst 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

您可以只内联类名函数

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'}`}>

类之间的三元或空在反应Java脚本中：

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

渲染类与否在 React Java 脚本和类型脚本中是三元的：

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