Quiero cambiar el tamaño de uno de los cuadros dentro de la función de mapa. Si todas las cajas tienen un tamaño de 10 px, quiero que una de las cajas «=» duplique la longitud de otras cajas.

CSS:

.display-keys { display: grid; grid-template-columns: 10px; } .display-equal { display: grid; grid-template-columns: 20px; } 

Reaccionar:

 const Keys = ({calcKeys})={amp}gt;( {amp}lt;div{amp}gt; {calcKeys.map(item={amp}gt; {item.key} !== "=" ? {amp}lt;button className="display-keys"{amp}gt;{item.key}{amp}lt;/button{amp}gt; : {amp}lt;button className="display-equal"{amp}gt;{item.key}{amp}lt;/button{amp}gt; )} {amp}lt;/div{amp}gt;) class App extends React.Component { constructor(props) { super(props); this.state={ calcKeys:[{"key": "AC"},{"key": "CE"},{"key": "±"},{"key": "="}] }; render(){ return( {amp}lt;div className="display-container"{amp}gt; {amp}lt;Keys calcKeys={this.state.calcKeys}/{amp}gt; {amp}lt;/div{amp}gt; ) } ReactDOM...... 

Algo como esto debería funcionar:

 {calcKeys.map((item)={amp}gt;{ if(item.key !== '='){ return {amp}lt;button className="display-keys"{amp}gt;{item.key}{amp}lt;/button{amp}gt; } return {amp}lt;button className="display-equal"{amp}gt;{item.key}{amp}lt;/button{amp}gt; }) } 

En primer lugar, debe devolver el resultado de la función de mapa

  {calcKeys.map(item={amp}gt;{ return (item.key !== "=") ? {amp}lt;button className="display-keys"{amp}gt;{item.key}{amp}lt;/button{amp}gt; : {amp}lt;button className="display-equal"{amp}gt;{item.key}{amp}lt;/button{amp}gt; } ) } 

siguiente:

La propiedad CSS grid-template-columnas define los nombres de línea y las funciones de tamaño de pista{amp}gt; de las columnas de la cuadrícula.

En su CSS, use el width para la longitud de los cuadros

 .display-keys { width: 40px; } .display-equal { width: 80px; } 

no necesita poner display: grid dentro de esos archivos. Creo que ya lo tienes en .display-container

y finalmente, puedes consultar estos códigos y la casilla de verificación.