有条件地向 React 组件添加属性

Conditionally add attributes to React components

使用三元运算符有条件地向 React 组件添加属性，例如<button disabled={count > 3 ? true : null}>.

如果问号左边的值为真，则运算符返回冒号左边的值，否则返回右边的值。

应用程序.js


import './App.css';
import {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  const role = 'link';

  let myClass = '';
  if (count >= 0) {
    myClass = 'bg-salmon';
  }

  return (
    <div>
      {/* 👇️ conditionally set attribute value with ternary operator */}
      <button
        disabled={count > 3 ? true : null}
        onClick={() => setCount(current => current + 1)}
      >
        Count: {count}
      </button>

      {/* 👇️ using a variable */}
      <a href="https://google.com" role={role}>
        Google.com
      </a>

      {/* 👇️ interpolating a variable */}
      <h2 className={`text-white ${myClass}`}>Some content</h2>
    </div>
  );
}

这是本文css中的示例。

应用程序.css


.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

反应有条件地设置属性

代码片段中的第一个示例使用
三元运算符
有条件地设置元素的属性。

应用程序.js


<button
  disabled={count > 3 ? true : null}
  onClick={() => setCount(current => current + 1)}
>
  Count: {count}
</button>

该代码检查count变量是否大于3，如果大于，则返回true属性disabled，否则null返回。

您还可以在 JSX 代码之外使用逻辑，然后使用变量来设置属性。

应用程序.js


import './App.css';

export default function App() {
  const role = 'link';

  let myClass = '';
  if ('hi'.length >= 0) {
    myClass = 'bg-salmon';
  }

  return (
    <div>
      {/* 👇️ using a variable */}
      <a href="https://google.com" role={role}>
        Google.com
      </a>

      {/* 👇️ interpolating a variable */}
      <h2 className={`text-white ${myClass}`}>Some content</h2>
    </div>
  );
}

您可以在设置myClass变量时使用您需要的任何逻辑，然后在设置属性时使用它。

每次组件重新呈现时，您的逻辑都会运行并更新变量的值。

您还可以创建一个包含属性名称和值的对象，然后使用
扩展语法 (…)
在元素上设置道具。

应用程序.js


import {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  const attrs = {};

  if ('hi'.length === 2) {
    attrs.role = 'button';
    attrs.onClick = () => {
      setCount(current => current + 1);
    };
  }

  return (
    <div>
      <button {...attrs}>Count: {count}</button>
    </div>
  );
}

我们初始化了一个空对象，然后有条件地为其设置属性。

然后使用扩展语法 (…) 从对象中解压所有键值对，并将它们设置为元素的 props。

您可以使用任何逻辑和条件来构建对象。

您将最常使用三元运算符将条件属性添加到 React 中的元素。

下面是一个有条件地设置元素display属性的示例。

应用程序.js


import {useState} from 'react';

export default function App() {
  const [isShown, setIsShown] = useState(true);

  const handleClick = event => {
    // 👇️ toggle visibility
    setIsShown(current => !current);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>

      <div style={{display: isShown ? 'block' : 'none'}}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
}

元素的propdisplay属性是使用
三元运算符有条件地设置的。stylediv

如果问号左边的值为真，则运算符返回冒号左边的值，否则返回冒号右边的值。

应用程序.js


const result1 = 5 === 5 ? 'yes' : 'no';
console.log(result1); // 👉️ "yes"

const result2 = 5 === 10 ? 'yes' : 'no';
console.log(result2); // 👉️ "no"

如果isShown状态变量存储真值，我们将display
属性设置为block。否则，它被设置为none。

–