使用var vs vanilla css在React中的樣式

-3

一直在尋找一種在React中設置樣式組件的方法，我是這樣做的：tutorial link但即使im複製/粘貼代碼，我仍然只是得到語法錯誤，所以無論是我錯過了什麼或有一個更好的方法來做到這一點。忘記添加代碼：使用var vs vanilla css在React中的樣式

import React, { Component } from 'react'; 

export default class Test extends Component { 
    var backgroundStyle = React.createClass({ 
    render: function() { 
     padding: 10, 
     margin: 10, 
     backgroundColor: "#ffde00", 
     color: "#333", 
     display: "inline-block", 
     fontFamily: "monospace", 
     fontSize: "32", 
     textAlign: "center" 
     }; 

     return (
     <div style={backgroundStyle}>Hi there</div> 
    ); 
    } 
    }); 
}

來源

2017-02-22 Nicholas Ritson

如果您對代碼，構建環境等知之甚少，我們應該如何知道您是否遺漏了某些東西。 –

*我們不知道;） –

即時通訊問如果設置它作爲一個變量是正確的方法，我可以很容易地在樣式表中設置，並將一個className應用到元素，但是從那些讀取的不是正確的方式React希望你使用，所以顯然是一個var，但如果我這樣做，它不會編譯，所以這是正確的方式，但格式不正確？還是這是錯誤的方式？ –

的問題是在這條線：

var backgroundStyle = React.createClass({

原因很簡單一個，風格接受object和React.CreateClass回報和html部分不是object，你錯過了m中的那部分在鏈接中，他們在單獨的object而不是react component中定義了該樣式，並使用該內部返回。再次檢查該鏈接，運行下面的代碼片段，它會工作：

class Test extends React.Component { 
 
render(){ 
 
    var backgroundStyle = { 
 
     padding: 10, 
 
     margin: 10, 
 
     backgroundColor: "#ffde00", 
 
     color: "#333", 
 
     display: "inline-block", 
 
     fontFamily: "monospace", 
 
     fontSize: "32", 
 
     textAlign: "center" 
 
     }; 
 
     
 
     return (
 
     <div style={backgroundStyle}>Hi there</div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<Test/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id='app'></div>

來源

2017-02-22 17:48:23

這個問題不只是在那一行。整個代碼沒有意義（不幸的是）。看到[我的評論]（https://stackoverflow.com/questions/42397874/styling-in-react-using-var-vs-vanilla-css?noredirect=1#comment71944846_42397874）所有的事情是錯誤的。 –

@FelixKling我懷疑你是一個男人還是上帝，你是一個很棒的傢伙:)致敬:) :) –

謝謝你很容易理解，這是爲我做的，修復了所有其他作品 –

試試這個

import React, { Component } from 'react'; 

export default class Test extends Component { 
    render() { 
     const backgroundStyle = { 
     padding: 10, 
     margin: 10, 
     backgroundColor: "#ffde00", 
     color: "#333", 
     display: "inline-block", 
     fontFamily: "monospace", 
     fontSize: "32", 
     textAlign: "center" 
     }; 

     return (
     <div style={backgroundStyle}>Hi there</div> 
    ); 
    } 
    }); 
}

來源

2017-02-22 17:42:56 spirift

OP可能需要更多的幫助，而不僅僅是「嘗試這個」。 –

你嵌套React.createClass內一個陣營組件class定義...

如果你只是定義一個組件（它看起來像你正在做的）做一個或另一個，但不是兩個。

另外你想直接在JavaScript來定義CSS類，使用CSS語法（這不是有效的JavaScript）內 JavaScript函數...

檢查Felix概括了上述和更多...

來源

2017-02-22 18:03:09 Pineda

使用var vs vanilla css在React中的樣式

回答

相關問題