if 语句不作为对象返回 React JS

Question

我试图在一个样式标签中写两个表达式，但它一直给我以下错误The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.我该如何解决？

<table id='calendario'>
              <tbody>
                {linhas.map((linha) => (
                  <tr key={linha}>
                  {colunas.map((coluna , e , i) => (
                  <td
                  key={coluna} onLoad={() => {
                    if(e < index.length){e = e};
                    if(i >= proximo_mes.length){i = i};
                  }}
                  style={() => {if(linha == 0 && coluna == e){return {filter : 'brightness(0.6)'}};
                  if(linha == 4 && coluna == i){return{filter : 'brightness(0.6)'}}
                  else{return{filter : 'brightness(1)'}}}}
                ></td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

Answer 1

像这样使用ternary operator：

style={(linha == 0 && coluna == e) ? {filter : 'brightness(0.6)'} : (linha == 4 && coluna == i) ? {filter : 'brightness(0.6)'} :  {filter : 'brightness(1)'}}

或者这个：

style={{filter :(linha == 0 && coluna == e) ? 'brightness(0.6)' : (linha == 4 && coluna == i) ?'brightness(0.6)' : 'brightness(1)'}}

错误发生是因为您返回的是 function 而不是 object，检查这个例子：

console.log("Function Style: ", {
  style: () => {
    if (true) {
      return { filter: "brightness(0.6)" };
    }
  }
})

console.log("Ternary Style: ", {
  style: true ? { filter: "brightness(0.6)" } : { filter: "brightness(1)" }
})

if 语句不作为对象返回 React JS

if statement not returning as an object React JS

javascript

css

frontend

reactjs

react-dom