Reactjs React forwardRef类组件中当前为空

我是一个比较新的反应者&似乎无法理解，我已经研究了一段时间了&似乎什么都不起作用

我有一个使用createRef的父组件

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.chartRef = React.createRef();
    }

然后将其传递给child&访问如下

<Grid item xs={12}>
   <Child
      ref={this.chartRef}
    />
    <Button onClick={this.getState}> get ref info</Button>
</Grid>

这是子组件

class Child extends React.Component {
    componentDidMount() {
        this.props.registerPlugins.forEach(plugin => {
            Chart.pluginService.register(plugin);
        });
    }

    render = () => {
        const { data, options, plugins, height } = this.props;

        const updatedOptions = {
            ...options
        };

        return <div>
            <Line
                height={height}
                data={data}
                options={updatedOptions}
                plugins={plugins}/>
        </div>;
    };
}


Child.propTypes = {
    height: PropTypes.number.isRequired,
    data: PropTypes.object.isRequired,
    options: PropTypes.object.isRequired,
    plugins: PropTypes.array,
    registerPlugins: PropTypes.array,
};

export default Child;

类子级扩展React.Component{
componentDidMount（）{
this.props.registerPlugins.forEach（插件=>{
Chart.pluginService.register（插件）；
});
}
渲染=（）=>{
const{data，options，plugins，height}=this.props；
常数更新选项={
…选项
};
返回
;
};
}
Child.propTypes={
高度：PropTypes.number.isRequired，
数据：PropTypes.object.isRequired，
选项：PropTypes.object.isRequired，
插件：PropTypes.array，
registerPlugins:PropTypes.array，
};
导出默认子对象；

---

非常感谢您提供的任何帮助

您可以使用回调样式ref，例如，您可以传递对函数的引用，而不是将ref作为prop传递，如

this.handleRef

handleRef = r => {
    this.chartRef.current = r;
};

<Child ref={this.handleRef} />

handleRef=r=>{
this.chartRef.current=r；
};

您可以在参考的帮助下访问父级中的子组件，如下所示

import React from "react";
import { Button, View } from "react-native";
import Child from "./Child";

class App extends React.Component {
  constructor() {
    super();
    this.chartRef = React.createRef();
  }
  render() {
    return (
      <View>
        <Child ref={(r) => (this.chartRef = r)} />
        <Button
          title="Parent Button"
          onPress={() => {
            console.log(this.chartRef);
          }}
        ></Button>
      </View>
    );
  }
}

export default App;

从“React”导入React；
从“react native”导入{按钮，视图}；
从“/Child”导入子项；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.chartRef=React.createRef（）；
}
render（）{
返回(
（this.chartRef=r）}/>
{
console.log（this.chartRef）；
}}
>
);
}
}
导出默认应用程序；

//Child.js

import React from "react";
import { Button } from "react-native";

export default class Child extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <Button
        title="Child Button"
        onPress={() => {
          alert("Child");
        }}
      ></Button>
    );
  }
}

从“React”导入React；
从“react native”导入{Button}；
导出默认类子类扩展React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
{
警惕（“儿童”）；
}}
>
);
}
}

---

您可以在

上尝试此代码，但不幸的是，此代码不起作用。您的问题对我来说有点不清楚，您是在尝试访问child中的父引用还是在parent中的子引用？您似乎有一个输入错误，因为您缺少child

@ShubhamKhatri的结尾

@ShubhamKhatri我只是复制了相关部分以保留简单易懂的东西&编辑时错过了结束括号，我的错。我这边的代码工作得很好，问题是ref为空。编辑了我的答案，谢谢你的指点out@Saad即使是在你更新的问题中，参考文献似乎也被错误地附加了。如果您的问题无法重现，则很难提供解决方案。您可以在codesandbox中创建并重新生成您的问题吗？因为当前的一些答案应该已经解决了你的问题。它在codepen上工作，但是当我实现完全相同的东西时，它仍然显示为空。在我的研究中，我遇到了类似的解决方案，但不幸的是，在我的案例中，它们似乎都不起作用。谢谢你的例子

import React from "react";
import { Button } from "react-native";

export default class Child extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <Button
        title="Child Button"
        onPress={() => {
          alert("Child");
        }}
      ></Button>
    );
  }
}