如果我有类似的东西
<Parent>
<Child1 />
<Child2 />
<Child3 />
</Parent>
我想从Child2我拥有的地方访问，我该refs="child2refs"怎么做？
如何访问父组件中子组件的引用
IT技术
reactjs
2021-04-09 03:18:08
6个回答
推荐用于 16.3 之前的 React 版本
如果无法避免，从React 文档中提取的建议模式将是：
import React, { Component } from 'react';
const Child = ({ setRef }) => <input type="text" ref={setRef} />;
class Parent extends Component {
constructor(props) {
super(props);
this.setRef = this.setRef.bind(this);
}
componentDidMount() {
// Calling a function on the Child DOM element
this.childRef.focus();
}
setRef(input) {
this.childRef = input;
}
render() {
return <Child setRef={this.setRef} />
}
}
该家长转发绑定到一个功能props家长 this。当呼叫作出react的儿童的 refpropssetRef也将分配孩子的 ref给父母的 childRef财产。
推荐用于 React >= 16.3
Ref forwarding 是一个选择加入的功能，它让一些组件接受他们收到的 ref，并将它进一步向下传递（换句话说，“转发”它）给子组件。
我们创建的组件可以转发他们ref用React.forwardRef。返回的Component ref prop 的类型必须与 的返回类型相同React.createRef。每当 React 挂载 DOM 节点时current，所ref创建的 with 的属性React.createRef将指向底层 DOM 节点。
import React from "react";
const LibraryButton = React.forwardRef((props, ref) => (
<button ref={ref} {...props}>
FancyButton
</button>
));
class AutoFocus extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
this.onClick = this.onClick.bind(this);
}
componentDidMount() {
this.childRef.current.focus();
}
onClick() {
console.log("fancy!");
}
render() {
return <LibraryButton onClick={this.onClick} ref={this.childRef} />;
}
}
转发 refs HOC 示例
创建的组件将它们转发ref到子节点。
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
}
render() {
const {forwardedRef, ...rest} = this.props;
// Assign the custom prop "forwardedRef" as a ref
return <Component ref={forwardedRef} {...rest} />;
}
}
// Note the second param "ref" provided by React.forwardRef.
// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
// And it can then be attached to the Component.
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardedRef={ref} />;
});
}
请参阅React 文档中的转发引用。
- 在子组件内添加一个引用到你需要的节点
- 在父组件内添加对子组件的引用。
/*
* Child component
*/
class Child extends React.Component {
render() {
return (
<div id="child">
<h1 ref={(node) => { this.heading = node; }}>
Child
</h1>
</div>
);
}
}
/*
* Parent component
*/
class Parent extends React.Component {
componentDidMount() {
// Access child component refs via parent component instance like this
console.log(this.child.heading.getDOMNode());
}
render() {
return (
<div>
<Child
ref={(node) => { this.child = node; }}
/>
</div>
);
}
}
首先通过以下方式访问孩子：this.props.children，然后每个孩子都将拥有它ref作为其上的属性。
这是一个使用 refs 关注输入的示例（在 React 16.8.6 中测试）：
子组件：
class Child extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (<input type="text" ref={this.myRef} />);
}
}
带有子组件的父组件：
class Parent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
componentDidMount() {
this.childRef.current.myRef.current.focus();
}
render() {
return <Child ref={this.childRef} />;
}
}
ReactDOM.render(
<Parent />,
document.getElementById('container')
);
带有 this.props.children 的父组件：
class Parent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
componentDidMount() {
this.childRef.current.myRef.current.focus();
}
render() {
const ChildComponentWithRef = React.forwardRef((props, ref) =>
React.cloneElement(this.props.children, {
...props,
ref
})
);
return <ChildComponentWithRef ref={this.childRef} />
}
}
ReactDOM.render(
<Parent>
<Child />
</Parent>,
document.getElementById('container')
);
使用 Ref forwarding 您可以将 ref 从父级传递给子级。
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
- 通过调用 React.createRef 创建一个 React ref 并将其分配给一个 ref 变量。
- 通过将您的 ref 指定为 JSX 属性来传递给它。
- React 将 ref 作为第二个参数传递给 forwardRef 内部的 (props, ref) => ... 函数。
- 通过将此 ref 参数指定为 JSX 属性来转发此参数。
- 当附加 ref 时， ref.current 将指向 DOM 节点。
注意 第二个 ref 参数仅在您使用 React.forwardRef 调用定义组件时才存在。常规功能或类组件不接收 ref 参数，并且 ref 在 props 中也不可用。
Ref 转发不仅限于 DOM 组件。您也可以将引用转发到类组件实例。
参考：React 文档。