[react 基礎篇]——React.createClass()方法同時創建多個組件類


react 組件

React 允許將代碼封裝成組件(component),然后像插入普通 HTML 標簽一樣,在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類

 

一個組件創建

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="fannieGirl" />,
  document.getElementById('example')
);

 

兩個組件創建

var HelloMessage1 = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      var HelloMessage2 = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <div>
            <HelloMessage1 name="fannie" />
            <HelloMessage2 name="Girl" />
        </div>,
        document.getElementById('example')
      );

同時創建多個組件,在ReactDOM.render()只能有一個頂層標簽,不然會報錯的

 

React.createClass()方法總結

  1. 所有組件類都必須有自己的 render 方法,用於輸出組件。
  2. 組件類的第一個字母必須大寫,否則會報錯
  3. 組件類只能包含一個頂層標簽,否則也會報錯。
  4. 組件的屬性可以在組件類的 this.props 對象上獲取
  5. 添加組件屬性,有一個地方需要注意,就是 class 屬性需要寫成 className ,for 屬性需要寫成 htmlFor ,這是因為 class 和 for 是 JavaScript 的保留字。

后話

  react 組件創建方式有三種,下一篇具體說說哪三種?有何區別?怎么選擇適合自己的?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM