React-元件新增、擴充套件與使用
prop 父傳子
在 React 應用中，資料通過 props 的傳遞，從父元件流向子元件
Child 是一個 React 元件類，或者說是一個 React 元件型別。
一個元件接收一些引數，我們把這些引數叫做 props（“props” 是 “properties” 簡寫），然後通過 render 方法返回需要展示在螢幕上的檢視的層次結構
props.children
class Child extends React.Component { render() { return ( <button className=acceptValue" onClick={() => alert('click')}> 父元件流向子元件的值為: {this.props.value} </button> ); } } // 用法示例: <Child value="X" />
class Father extends React.Component { renderChild(i) { return <Child value={i} />; } render() { return ( <div> <div className="provideValue"> {this.renderChild(0)}</div> </div> ); } }
state 來實現所謂“記憶”的功能。
可以通過在React 元件的建構函式中設定 this.state 來初始化 state。this.state 應該被視為一個元件的私有屬性。我們在 this.state 中儲存當前每個方格（Child）的值，並且在每次方格被點選的時候改變這個值。
首先，我們向這個 class 中新增一個建構函式，用來初始化 state：
在 JavaScript class 中，每次你定義其子類的建構函式時，都需要呼叫
super方法。因此，在所有含有建構函式的的React元件中，建構函式必須以super(props)開頭。
class Child extends React.Component { + constructor(props) { + super(props); + this.state = { + value: null, + }; + } render() { return ( - <button className="acceptValue" onClick={() => alert('click')}> + <button + className="acceptValue" + onClick={() => this.setState({value: 'X'})} + > - {this.props.value} + {this.state.value} </button> ); } }
class Father extends React.Component {
renderChild(i) {
+ return <Child/>;
}
render() {
return (
<div>
<div className="provideValue"> {this.renderChild(0)}</div>
</div>
);
}
}
子元件的 state 資料提升至其共同的父元件當中儲存
當你遇到需要同時獲取多個子元件資料，或者兩個元件之間需要相互通訊的情況時，需要把子元件的 state 資料提升至其共同的父元件當中儲存。之後父元件可以通過 props 將狀態資料傳遞到子元件當中。這樣應用當中所有元件的狀態資料就能夠更方便地同步共享了。
class Child extends React.Component {
render() {
return (
+ <button
+ className="acceptValue"
+ onClick={() => this.props.onClick()}
+ >
{this.props.value}
- {this.state.value}
</button>
);
}
}
class Father extends React.Component {
+ constructor(props) {
+ super(props);//在 JavaScript class 中，每次你定義其子類的建構函式時，都需要呼叫 super 方法。因此，在所有含有建構函式的的 React 元件中，建構函式必須以 super(props) 開頭
+ this.state = {
+ values: Array(9).fill(null)
+ };
+ }
+ handleClick(i){
+ const values=this.state.values.slice();// .slice() 方法建立了 squares 陣列的一個副本，而不是直接在現有的陣列上進行修改.簡化複雜的功能-不直接在資料上修改可以讓我們追溯並複用遊戲的歷史記錄;跟蹤資料的改變;確定在 React 中何時重新渲染
+ values[i]='X'
+ this.setState({values:values});
+ }
renderChild(i) {
return (
<Child
+ value={this.state.values[i]}
+ onClick={() => this.handleClick(i)}
/>
);
}
render() {
return (
<div>
<div className="provideValue">
{this.renderChild(0)}
</div>
</div>
);
}
}
函式元件
如果你想寫的元件只包含一個 render 方法，並且不包含 state，那麼使用函式元件就會更簡單。
我們不需要定義一個繼承於 React.Component 的類，我們可以定義一個函式，這個函式接收 props 作為引數，然後返回需要渲染的元素。函式元件寫起來並不像 class 元件那麼繁瑣，很多元件都可以使用函式元件來寫。
function Child(props) {
return (
<button className="acceptValue" onClick={props.onClick}>
{props.value}
</button>
);
}
注意
當我們把Square修改成函式元件時，我們同時也把onClick={() => this.props.onClick()}改成了更短的onClick={props.onClick}（注意兩側都沒有括號）。
向事件處理程式傳遞引數
在迴圈中，通常我們會為事件處理函式傳遞額外的引數。例如，若 id 是你要刪除那一行的 ID，以下兩種方式都可以向事件處理函式傳遞引數：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
在這兩種情況下，React 的事件物件 e 會被作為第二個引數傳遞。如果通過箭頭函式的方式，事件物件必須顯式的進行傳遞，而通過 bind 的方式，事件物件以及更多的引數將會被隱式的進行傳遞。
與運算子 &&
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
+ {unreadMessages.length > 0 &&
+ <h2>
+ You have {unreadMessages.length} unread messages.
+ </h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
在 JavaScript 中，true && expression 總是會返回 expression, 而 false && expression 總是會返回 false。
因此，如果條件是 true，&& 右側的元素就會被渲染，如果是 false，React 會忽略並跳過它。
三目運算子
使用 JavaScript 中的三目運算子 condition ? true : false。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
就像在 JavaScript 中一樣，你可以根據團隊的習慣來選擇可讀性更高的程式碼風格。需要注意的是，如果條件變得過於複雜，那你應該考慮如何提取元件。
阻止元件渲染
在極少數情況下，你可能希望能隱藏元件，即使它已經被其他元件渲染。若要完成此操作，你可以讓 render 方法直接返回 null，而不進行任何渲染。
下面的示例中，
function WarningBanner(props) {
+ if (!props.warn) {
+ return null;
+ }
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning
}));
}
render() {
return (
<div>
+ <WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
key
當元素沒有確定 id 的時候，萬不得已你可以使用元素索引 index 作為 key：
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
如果列表專案的順序可能會變化，我們不建議使用索引來用作 key 值，因為這樣做會導致效能變差，還可能引起元件狀態的問題。可以看看 Robin Pokorny 的深度解析使用索引作為 key 的負面影響這一篇文章。
如果你選擇不指定顯式的 key 值，那麼 React 將預設使用索引用作為列表專案的 key 值。
表單
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
+ this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('你喜歡的風味是: ' + this.state.value);
+ event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
選擇你喜歡的風味:
+ <select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">葡萄柚</option>
</select>
</label>
+ <input type="submit" value="提交" />
</form>
);
}
}
你可以將陣列傳遞到 value 屬性中，以支援在 select 標籤中選擇多個選項：
<select multiple={true} value={['B', 'C']}>
注意點
元件名稱必須以大寫字母開頭。componentDidMount()方法會在元件已經被渲染到 DOM 中後執行- 建構函式是唯一可以給
this.state賦值的地方,this.setState({}); 資料是向下流動的,state為區域性的或是封裝的。除了擁有並設定了它的元件，其他元件都無法訪問,元件可以選擇把它的state作為props向下傳遞到它的子元件.這通常會被叫做“自上而下”或是“單向”的資料流。任何的state總是所屬於特定的元件，而且從該state派生的任何資料或 UI 只能影響樹中“低於”它們的元件React事件的命名採用小駝峰式（camelCase），而不是純小寫。key應該在陣列的上下文中被指定.在map()方法中的元素需要設定key屬性.key只是在兄弟節點之間必須唯一- 如果你的元件中需要使用
key屬性的值，請用其他屬性名顯式傳遞這個值.無法通過props讀出props.key - JSX 允許在大括號中嵌入任何表示式