在React中使用大括號

我正在嘗試學習React。我在使用花括號時遇到了麻煩。使用大括號可以區分JSX和JS 在下面的代碼中，大括號1表示「現在是JS」。爲什麼有大括號2？它已經在一個花括號區內了？在React中使用大括號

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var MyCompClass = React.createClass({ // open curly brace 1 
    render: function() { // open curly brace 2 
    return <h1>Hello</h1>; 
    } 
}); 

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

第二個快速的問題：

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

爲什麼.render（）需要大約MyComponentClass HTML標記？

謝謝你的幫助！

來源

2017-05-25 droledenom

您正在使用對象參數調用React.createClass方法。第一個花括號是標準javascript object的語法。在這個對象中有一個叫做'render'的屬性。這個render屬性可能是一個函數，所以第二個花括號是javascript函數語法的作用域。

此外，渲染方法中的HTML標記是您的React組件，這是JSX語法。

所以，以下單證可能會有所幫助：

編輯：另外，我意識到陣營道具的使用可能會導致你的困惑。在反應中，使用花括號再次使用道具的語法，但這用於爲組件提供動態綁定。通過使用這種語法，如果您的prop的值發生變化，您的組件將能夠更新您的html。下面是這種情況的例子：

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
} 

const element = <Welcome name="Sara" />; 
ReactDOM.render(
    element, 
    document.getElementById('root') 
);

有關詳細信息，請檢查相關文件做出反應的Component and Props usage。

來源

2017-05-25 13:10:35

謝謝你的回答。第一個大括號是由於createClass的語法造成的，第二個大括號也是由於使用函數而引起的語法問題？那是對的嗎？ – droledenom

@droledenom是的。第一個是對象參數。 Javascript對象使用大括號來定義，如{name：'John'，姓氏：'Patrick'}。而且，這個對象的屬性可以寫成{name：'John'，姓''Patrick'，fullName：function（）{return this.name + this.surname}}。正如你看到的第二個是函數的定義。 –

好的，謝謝我認爲我已經理解 – droledenom

大括號2包含render（）函數的主體。

大括號1 ...實際上還包含函數的主體，其中函數是React.createClass()。此函數將一個對象作爲參數，該對象由大括號1創建，其中包含函數和變量（在本例中，此對象僅包含render()方法）。

事實是，在這個例子中，唯一的JSX元素是<h1>Hello</h1>;和<MyCompClass />。他們使用JSX語法，而純JS則需要createElement()和appendChild() DOM功能。

來源

2017-05-25 13:11:07 OurOwnOwl

在React中使用大括號

回答

相關問題