資訊專欄INFORMATION COLUMN
摘要：綁定屬性調(diào)用的時候使用調(diào)用子組件方法這是一個很神奇的方法，它可以調(diào)用子組件的方法以及屬性。建立組件建立子組件，并在子組件實現(xiàn)一個方法，如，這個方法實現(xiàn)變更當前組件上面的文本，提供這樣一個測試用例。輸入框獲取焦點完整實例點我輸入框獲取焦點
React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。
ref : 綁定屬性
refs : 調(diào)用的時候使用
調(diào)用子組件方法這是一個很神奇的方法refs，它可以調(diào)用子組件的方法以及屬性。下面用一個例子來實現(xiàn)調(diào)用子組件方法。
建立組件建立子組件MyComponent.js，并在子組件實現(xiàn)一個方法，如:subHandleClick，這個方法實現(xiàn)變更當前組件上面的文本，提供這樣一個測試用例。
使用子組件通過import SubComponent from "./SubComponent"來引用子組件SubComponent，在 render方法中注冊使用組件
render(){
return(
綁定ref屬性
在子組件調(diào)用上面綁定一個值為subcomponents的屬性ref，subcomponents
調(diào)用子組件方法
在入口父組件App.js中，添加方法handleClick，去調(diào)用子組件SubComponent.js中的subHandleClick方法
handleClick(){
//this.refs.subcomponents可以訪問子組件的方法
//也可以獲取子組件的state...
this.refs.subcomponents.subHandleClick();
}
完整實例
入口父組件App.js
import React, { Component } from "react";
import SubComponent from "./SubComponent"
class MyComponent extends Component {
handleClick(){
this.refs.subcomponents.subHandleClick();
}
render(){
return(
子組件SubComponent.js
import React, { Component } from "react";
export default class SubComponent extends Component {
constructor(props) {
super(props);
this.state = {
text: "這里是初始化文本"
};
}
subHandleClick(){
this.setState({text: "文本被改變啦！哈哈！"})
}
render(){
return(
查看：{this.state.text}
)
}
}
訪問父組件方法
父組件Parent.js
class Parent extends React.Component{
constructor(props){
super(props);
this.state = {
value:""
}
}
refresh(){
// 這里箭頭函數(shù)很重要
return ()=>{
this.setState({value:"這里是子組件調(diào)用的方法"})
}
}
render(){
return (
兄弟組件溝通
{this.state.value}
)
}
}
ReactDOM.render(
子組件SubComponent.js
import React, { Component } from "react";
export default class SubComponent extends Component {
constructor(props) {
super(props);
}
subHandleClick(){
this.setState({text: "文本被改變啦！哈哈！"})
}
render(){
return(
)
}
}
獲取DOM實例
通過ref屬性，你可獲取，實例中的屬性方法，甚至可以通過他獲取到DOM實例節(jié)點this.refs.myInput.getDOMNode()
ref 屬性綁定 refs 獲取DOM實例獲取支撐實例（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的實例。
// 輸入框獲取焦點 this.refs.myInput.focus()完整實例
import React, { Component } from "react";
class MyComponent extends Component {
handleClick(){
this.refs.myInput.focus();
}
render(){
return(
)
}
}
ReactDOM.render(
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/87836.html
摘要：通常在組件的構造函數(shù)內(nèi)創(chuàng)建，使其在整個組件中可用。例如純文本查看復制代碼如上所示一個實例在構造函數(shù)中創(chuàng)建，并賦值給在方法內(nèi)部，將構造函數(shù)中創(chuàng)建的傳遞給接下來，讓我們看一個在組件中使用的示例。回調(diào)回調(diào)是在中使用的另一種方式。 使用 React 時，我們的默認思維方式應該是 不會強制修改 DOM ，而是通過傳入 props 重新渲染組件。但是，有些情況卻無法避免修改 DOM 。React ...
摘要：一個組件的生命周期分為三個部分實例化存在期和銷毀時。如果回調(diào)函數(shù)以函數(shù)的方式來指定，那么在組件更新的時候回調(diào)會被調(diào)用次。 一個React組件的生命周期分為三個部分：實例化、存在期和銷毀時。 實例化階段 客戶端渲染時，如下依次被調(diào)用 getDefaultProps() getInitialState() componentWillMount() render() component...
摘要：指定讀取當前的。它為其后代元素觸發(fā)額外的檢查和警告。嚴格模式檢查僅在開發(fā)模式下運行它們不會影響生產(chǎn)構建。作用識別不安全的生命周期關于使用過時字符串的警告關于使用廢棄的方法的警告檢測意外的副作用檢測過時的為高階組件。 react 進階 懶加載 React.lazy函數(shù)能讓你像渲染常規(guī)組件一樣處理動態(tài)引入（的組件）。Suspense加載指示器為組件做優(yōu)雅降級。fallback屬性接受任何在...
閱讀 1139·2021-09-22 15:32
閱讀 1734·2019-08-30 15:53
閱讀 3267·2019-08-30 15:53
閱讀 1420·2019-08-30 15:43
閱讀 464·2019-08-28 18:28
閱讀 2582·2019-08-26 18:18
閱讀 677·2019-08-26 13:58
閱讀 2539·2019-08-26 12:10
