陣營內嵌樣式不與道具的工作

我試圖控制屬性，左右道具，但保持想出一個錯誤陣營內嵌樣式不與道具的工作

"Syntax error: this is a reserved word"

我試過幾種不同的方法（和在各種實例上看着StackO）解決我的答案，並繼續提出錯誤。我已經縮短了我的代碼，以便在這裏找到肉和土豆。

我在App.js有這樣的，它與Pulse.js工作，直到我試圖通過道具

class App extends Component { 
render() { 
    return (
    <div className="App"> 
    <Nav /> 
    <Content /> 
    <Pulse top="-124" left="300" /> 
    </div> 
); 
} 
} 

export default App;

這裏是從Pulse.js

代碼

class Pulse extends React.Component { 
    render() { 
    return (
     <Star style={{top: {this.props.top} + 'em'}}></Star> 
    ); 
    } 
} 

export default Pulse;

當我輸入「this.props.top」作爲我的風格，我得到我的錯誤。我試過各種方法來解決這個問題，並繼續出現錯誤。謝謝你的幫助！

來源

2017-05-21 sthig

<Star style={{top: {this.props.top} + 'em'}}></Star>

刪除語法上是無效的包裝更{}各地this.props.top

<Star style={{top: this.props.top + 'em'}}></Star>

說明一下：

JSX是一個「DSL」，領域特定語言。這不是Javascript。在JSX，你可以把香草JavaScript表達式花括號內有些地方，像

<Star style={...vanilla javascript expression...} />

一旦你花括號內，沒有必要額外的花括號來讀取變量。您可以參考this.props.top，而不用將它包裹在更多大括號中。

當您使用此語法：{this.props.top}編譯器會很困惑，想你想建立一個JavaScript對象像{a: 'b'}但不是a，你想用這個詞this，這是在JavaScript中的保留字。編譯器認爲你正在嘗試執行類似{this: this}這是無效的，因爲裸字this是保留字。

來源

2017-05-21 18:09:45

安迪雷，如果現在可以擁抱你，我會的。我一整天都在撞牆。 THANK YOU – sthig

另外一個問題，我也試過把在道具「左」也和它不工作，我想這是不正確的語法： '<星的風格= {{頂：this.props.top +「像素; 「}} {{左：this.props.left + 'PX;'}}>' – sthig

是啊，你又在規則的Javascript表達的土地現在只是。你不能把兩個javascript對象放在一起'var objs = {a：b} {c：d};'你可以在這裏合併它們：'{{top：this.props.top +'px;'，left ：this.props.left +'px;'}}'。這是一個有點混亂，但'風格= {{}}'雙花括號只是意味着一個JavaScript對象'{...}'的JSX包裝內'風格= {}' –

陣營內嵌樣式不與道具的工作

回答

相關問題