摘要：绑定属性调用的时候使用调用子组件方法这是一个很神奇的方法，它可以调用子组件的方法以及属性。建立组件建立子组件，并在子组件实现一个方法，如，这个方法实现变更当前组件上面的文本，提供这样一个测试用例。输入框获取焦点完整实例点我输入框获取焦点
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
ref : 绑定属性
refs : 调用的时候使用
调用子组件方法这是一个很神奇的方法refs，它可以调用子组件的方法以及属性。下面用一个例子来实现调用子组件方法。
建立组件建立子组件MyComponent.js，并在子组件实现一个方法，如:subHandleClick，这个方法实现变更当前组件上面的文本，提供这样一个测试用例。
使用子组件通过import SubComponent from "./SubComponent"来引用子组件SubComponent，在 render方法中注册使用组件
render(){
return(
绑定ref属性
在子组件调用上面绑定一个值为subcomponents的属性ref，subcomponents
调用子组件方法
在入口父组件App.js中，添加方法handleClick，去调用子组件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(){
// 这里箭头函数很重要
return ()=>{
this.setState({value:"这里是子组件调用的方法"})
}
}
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实例节点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(
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87836.html
摘要：通常在组件的构造函数内创建，使其在整个组件中可用。例如纯文本查看复制代码如上所示一个实例在构造函数中创建，并赋值给在方法内部，将构造函数中创建的传递给接下来，让我们看一个在组件中使用的示例。回调回调是在中使用的另一种方式。 使用 React 时，我们的默认思维方式应该是 不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 DOM 。React ...
摘要：一个组件的生命周期分为三个部分实例化存在期和销毁时。如果回调函数以函数的方式来指定，那么在组件更新的时候回调会被调用次。 一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。 实例化阶段 客户端渲染时，如下依次被调用 getDefaultProps() getInitialState() componentWillMount() render() component...
摘要：指定读取当前的。它为其后代元素触发额外的检查和警告。严格模式检查仅在开发模式下运行它们不会影响生产构建。作用识别不安全的生命周期关于使用过时字符串的警告关于使用废弃的方法的警告检测意外的副作用检测过时的为高阶组件。 react 进阶 懒加载 React.lazy函数能让你像渲染常规组件一样处理动态引入（的组件）。Suspense加载指示器为组件做优雅降级。fallback属性接受任何在...
阅读 1408·2021-09-22 15:32
阅读 1916·2019-08-30 15:53
阅读 3497·2019-08-30 15:53
阅读 1638·2019-08-30 15:43
阅读 667·2019-08-28 18:28
阅读 2797·2019-08-26 18:18
阅读 867·2019-08-26 13:58
阅读 2735·2019-08-26 12:10
