在 JSX 中为数组的一部分设置样式

Question

我有一个数组，

const arr = [
  { age: 1, name: 'Raphael' },
  { age: 3, name: 'Inyang' },
  { age: 6, name: 'Ifiok' },
  { age: 8, name: 'Ekpedeme' }
];

我需要 5 岁以上的不透明度为 0.5，而其余的不透明度为 1

function changeOpacityOfArray(letter) {
        if (arr.age >= 5 ) {
      letter.style.opacity= '0.5';
    }
  
}

changeOpacityOfArray(arr);

以上在 JSX 中不起作用，

它说不能为未定义的元素设置样式

然后在 HTML 正文中，注意样式中的不透明度

<ul style={{listStyleType: 'none'}}>
    {arr.map(function(item){
         return (<li><div style={{display: 'flex', justifyContent: 'flex-start', width: 'auto', fontSize: 'calc(4px + 2vmin)', opacity: 1, justifyContent: 'flex-start' }}><p>{item.name}: {item.age}</p></div></li>)
      }
       )}

       </ul>  

Answer 1

在设置 div 样式时，您可以检查 item 的年龄并相应地设置不透明度。

const arr = [
  { age: 1, name: 'Raphael' },
  { age: 3, name: 'Inyang' },
  { age: 6, name: 'Ifiok' },
  { age: 8, name: 'Ekpedeme' },
];

<ul style={{ listStyleType: 'none' }}>
  {arr.map(function (item) {
    return (
      <li>
        <div
          style={{
            display: 'flex',
            justifyContent: 'flex-start',
            width: 'auto',
            fontSize: 'calc(4px + 2vmin)',
            opacity: item.age > 5 ? 0.5 : 1,
            justifyContent: 'flex-start',
          }}>
          <p>
            {item.name}: {item.age}
          </p>
        </div>
      </li>
    );
  })}
</ul>;

Answer 2

为什么不把年龄检查移到 style 属性中呢？

{arr.map(function (item) {
      return (
        <li>
          <div
            style={{
              display: "flex",
              justifyContent: "flex-start",
              width: "auto",
              fontSize: "calc(4px + 2vmin)",
              opacity: item.age > 5 ? 0.5 : 1,
              justifyContent: "flex-start",
            }}
          >
            <p>
              {item.name}: {item.age}
            </p>
          </div>
        </li>
      );
    })}

另外你在 opacity 属性中有一个错字，你必须用小写写它