2017-04-02

React.js開發入門教學(2)-傳入變數

上一篇我們已經成功的將最基本的DOM的建立與hello world學會了，這一次我們

來學學怎麼改變傳入DOM的變數吧。我們延續上次所用的hello world的代碼，但

是這次我們不要讓他固定顯示hello world，所以我們應該把建立元素的部分把它

拉出去當作一個function來用用！

先回顧一下上次的代碼：

var style = {style:{backgroundColor: 'black', color: '#FFFFFF'}}

ReactDOM.render(
  React.createElement('h2', style, 'hello world'),
  document.getElementById('test')
);

我們把這個代碼作一下小修改，改成以下的樣子

var style = {style:{backgroundColor: 'black', color: '#FFFFFF'}}

var helloworld = React.createClass({ //建立起一個React的component
    render:function(){  //這是返回一個reacjt元件用的方法
      return React.DOM.h2(style, 'hello world');  //老樣子，建立DOM
    }
  }
);

ReactDOM.render(
  React.createElement(helloworld),  //這裡把剛剛的component塞進去
  document.getElementById('test')
);

當你按下執行的時候，應該會與原本的結果沒有任何差別！這就表示你成功了！

接著我們來試著改變一下component的內容！把 world 字串改成 this.props.name

return React.DOM.h2(style, 'hello ' + this.props.name);

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

馬上執行之後，你應該會發現結果是 hello undefined

那是因為我們沒有傳任何值給他！所以我們再賦予它name的值

var style = {style:{backgroundColor: 'black', color: '#FFFFFF'}}
var name = {name: 'leo'}  //建立一個變數來放放名字

var helloworld = React.createClass({
    render:function(){
      return React.DOM.h2(style, 'hello ' + this.props.name);
    }
  }
);

ReactDOM.render(
  React.createElement(helloworld, name),  //把變數塞進去
  document.getElementById('test')
);

這次在執行總算看到了我們成功的將名字傳到我們要的元件中啦！

既然已經有辦法傳數值了，下次就來學學怎麼從表單中取值放進去吧！！

React