2、Reactjs中的屬性(this.props)
阿新 • • 發佈:2019-01-21
一、什麼是屬性
React官方文件上對於屬性的介紹如下: React 裡有一個非常常用的模式就是對元件做一層抽象。元件對外公開一個簡單的屬性(Props)來實現功能,但內部細節可能有非常複雜的實現。React中的每一個元件,都包含有一個屬性(props),屬性主要是從父元件傳遞給子元件的,在元件內部,我們可以通過this.props獲取屬性物件
二、屬性的使用方法
react中主要有下面三種方法來傳遞屬性:1、直接在元件中使用key/value的形式來指定屬性
下面的程式碼演示瞭如何使用key/value的形式指定屬性:可以看到,在自定義的HelloWorld元件中,我們指定了一個name為Jack的屬性,在元件中,獲取屬性的方法如下程式碼:React.render( <HelloWorld name="Jack"/>, document.getElementById('container') );
var HelloWorld = React.createClass({
render: function() {
return (
<div>Hello, {this.props.name}</div>
);
}
});
在{}中,通過this.props.name,就可以獲取到我們指定的name屬性的值了。
2、使用延展屬性為元件指定屬性
如下程式碼所示:為了在HelloWorld元件中定義多個屬性,我們首先定義了一個props物件,裡面包含兩個鍵值對,然後在<HelloWorld>標籤中,用{...props}的方式為元件傳遞了這兩個屬性,這就是JSX中的延展屬性,"..."成為延展操作符,這種方式可以很方便地為元件指定多個屬性,就相當於下面的程式碼:<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函式,可以為其指定屬性,如下程式碼:react官方認為,props應該是隻讀的,不應該被修改。因為 React 不能幫你檢查屬性型別(propTypes)。這樣即使你的 屬性型別有錯誤也不能得到清晰的錯誤提示。<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 物件。