如何在反應中設置內聯樣式jsx

我試圖在反應組件中應用內聯樣式，如下所示。這是設置風格以正確的方式，如果不是我怎樣才能做到這一點？如何在反應中設置內聯樣式jsx

<div 
    {...customProps} 
    style={{ width: `${widthValue}%`, 
     animationDelay: `${animationDelay}s`, 
     zIndex: `${zIndex}`, 
     animation: `loadbar ${incrementValue}s linear forwards`}} 
    key={i} 
    className={`well-background--${group.concept} 
     well-GroupedProgressBar--progress 
     well-GroupedProgressBar--${props.heightSize}`} 
    />,

感謝

來源

2017-07-25 User7354632781

改變每次你是如何試圖測試這個由渲染功能準備的樣式對象清理你的代碼？ – Pineda

我相信這是正確的做法。至於對方的回答表明，你可以用它自定義變量，但您的解決方案應該能正常運行。 –

你需要傳遞的obj內聯樣式屬性。你的代碼是正確的，但是你可以，如果它像

render() { 
    var style = { 
     width: `${widthValue}%`, 
     animationDelay: `${animationDelay}s`, 
     zIndex: `${zIndex}`, 
     animation: `loadbar ${incrementValue}s linear forwards` 
    } 
    return (
     <div 
      {...customProps} 
      style={style} 
      key={i} 
      className={`well-background--${group.concept} 
         well-GroupedProgressBar--progress 
         well-GroupedProgressBar--${props.heightSize}` 
         } 
      /> 

    ) 
}

來源

2017-07-25 19:53:23

你做了基本相同的事情，像他那樣，這是唯一的不同是，你使用的變量爲它的東西;） –

@ShubhamKhatri，我沒有嘗試，但我沒有看到任何區別。事情是'動畫：'加載欄$ {} incrementValue s線forwards''財產是沒有得到應用，所以我想，如果我做錯了什麼 – User7354632781

如何在反應中設置內聯樣式jsx

回答

相關問題