Reactjs中的屬性(this.props)
阿新 • • 發佈:2019-01-05
轉載自點選開啟連結
React中的每一個元件,都包含有一個屬性(props),屬性主要是從父元件傳遞給子元件的,在元件內部,我們可以通過this.props獲取屬性物件
下面的程式碼演示瞭如何使用key/value的形式指定屬性:
[html]
view plain
copy
Props 應該被當作禁止修改的。修改 props 物件可能會導致預料之外的結果,所以最好不要去修改 props 物件。
一、什麼是屬性
React官方文件上對於屬性的介紹如下: React 裡有一個非常常用的模式就是對元件做一層抽象。元件對外公開一個簡單的屬性(Props)來實現功能,但內部細節可能有非常複雜的實現。React中的每一個元件,都包含有一個屬性(props),屬性主要是從父元件傳遞給子元件的,在元件內部,我們可以通過this.props獲取屬性物件
二、屬性的使用方法
react中主要有下面三種方法來傳遞屬性:1、直接在元件中使用key/value的形式來指定屬性
- React.render(
- <HelloWorld name="Jack"/>,
- document.getElementById('container')
- );
- var HelloWorld = React.createClass({
- render: function() {
- return (
- <div>Hello, {this.props.name}</div>
- );
- }
- });
2、使用延展屬性為元件指定屬性
如下程式碼所示: [html] view plain copy- <script type="text/jsx">
- var HelloWorld = React.createClass({
- render: function() {
- return (
- <div>Hello, {this.props.name1}, {this.props.name2}</div>
- );
- }
- });
- var props = {
- name1: 'Jack',
- name2: 'Tom'
- };
- React.render(
- <HelloWorld {...props}/>,
- document.getElementById('container')
- );
- </script>
- React.render(
- <HelloWorld name1="Jack" name2="Tom"/>,
- document.getElementById('container')
- );
3、通過呼叫元件的setProps函式為元件指定屬性
React.render()函式執行後,會返回代表元件的一個物件,通過呼叫這個物件的setProps函式,可以為其指定屬性,如下程式碼: [html] view plain copy- <script type="text/jsx">
- var HelloWorld = React.createClass({
- render: function() {
- return (
- <div>Hello, {this.props.name}</div>
- );
- }
- });
- var instance = React.render(
- <HelloWorld />,
- document.getElementById('container')
- );
- instance.setProps({name: 'Jack'});
- </script>
Props 應該被當作禁止修改的。修改 props 物件可能會導致預料之外的結果,所以最好不要去修改 props 物件。