毕业设计博客网站开发,网站建设玖金手指谷哥十,wordpress特定用户特定分类,电子商务是干什么的工资一般多少将子节点的ref暴露给父节点
16.3以上 Refs转发#xff0c;将ref自动通过组件传递给子组件
1. 在父组件创建ref对象
2. 给子组件赋值ref
3. 通过React.forward向子组件转发ref属性
4. 父组件的ref对象指向子组件dom
5. ref参数只有在 React.forwardRef 组件内定义时可接受con…将子节点的ref暴露给父节点
16.3以上 Refs转发将ref自动通过组件传递给子组件
1. 在父组件创建ref对象
2. 给子组件赋值ref
3. 通过React.forward向子组件转发ref属性
4. 父组件的ref对象指向子组件dom
5. ref参数只有在 React.forwardRef 组件内定义时可接受const MyInput React.forwardRef((props, ref) input typetext placeholder{props.placeholder} ref{ref} /
)
class App extends React.Component {constructor(props) {super(props)this.refInApp React.createRef()}componentDidMount() {console.log(【APP】componentDidMount, this.refInApp)}inputOperate () {const oInput this.refInApp.currentoInput.focus()}render() {return (MyInput ref{this.refInApp} placeholder请输入 /button onClick{this.inputOperate}聚焦/button/)}
}
ReactDOM.render(App /,document.getElementById(app)
)在高阶组件中转发
匿名改具名
class MyInput extends React.Component {render() {return (input typetext /)}
}
function InputHoc(WrapperComponent) {class Input extends React.Component {render() {// 容器组件内部获取ref属性const { forwardedRef, ...props } this.propsreturn (// 将forwardedRef传递给参数组件WrapperComponent ref{forwardedRef} {...props} /)}}// return React.forwardRef((props, ref) {// return Input {...props} forwardedRef{ref} /// })// 向子组件传递ref function forwardRef(props, ref) {return Input {...props} forwardedRef{ref} /}forwardRef.displayName Input- WrapperComponent.namereturn React.forwardRef(forwardRef)}
const MyInputHoc InputHoc(MyInput)
class App extends React.Component {constructor(props) {super(props)this.refInApp React.createRef()}componentDidMount() {// 拿到高阶组件包裹的MyInput的实例console.log(【APP】componentDidMount, this.refInApp)}inputOperate () {const oInput this.refInApp.currentoInput.focus()}render() {return ({/* 用ref接收转发的ref */}MyInputHoc ref{this.refInApp} placeholder请输入 /button onClick{this.inputOperate}聚焦/button/)}
}
ReactDOM.render(App /,document.getElementById(app)
)16.2及以下 Refs转发
1. props传递
class MyInput extends React.Component {render() {return (input typetext ref{this.props.inputRef} placeholder{this.props.placeholder} /)}
}
class App extends React.Component {constructor(props) {super(props)this.refInApp React.createRef()}componentDidMount() {console.log(【APP】componentDidMount, this.refInApp)}inputOperate () {const oInput this.refInApp.currentoInput.focus()}render() {return ({/* 用ref接收转发的ref */}MyInput inputRef{this.refInApp} placeholder请输入 /button onClick{this.inputOperate}聚焦/button/)}
}
ReactDOM.render(App /,document.getElementById(app)
)2. 回调 class MyInput2 extends React.Component {constructor(props) {super(props)this.innerInput null}setMyInput (el) {// 这里就是dom没有包裹在对象里console.log(回调的方式el, el)this.innerInput el;}inputOperate () {this.innerInput.value this.innerInput.focus()}render() {return (input typetext ref{this.setMyInput} /button onClick{this.inputOperate}聚焦(回调方式)/button/)}
}3. 在父组件回调
class MyInput3 extends React.Component {render() {return (input typetext ref{this.props.inputRef} /)}
}
class App extends React.Component {componentDidMount() {// 在父组件获取到子组件的dom不是包裹在对象里的console.log(【APP】componentDidMount, this.oInput)}inputOperate2 () {this.oInput.focus()}render() {return (MyInput3 inputRef{el this.oInput el} /button onClick{this.inputOperate2}聚焦(回调2定义在父组件) /button/)}
}4. 字符串形式 已废弃
依赖组件实例下面的refs集合里的ref需要React保持追踪当前正在渲染的组件没有加载完成this没法确定可能会比较慢不能在render中工作不能组合只能有一个ref属性
class App extends React.Component {componentDidMount() {console.log(【APP】componentDidMount字符串,this.refs.inputRefText)}render() {return (input typetext refinputRefText //)}
}
