React forwardRef current null в компоненте класса

Я относительно новичок в реакции и, кажется, не могу понять этого, я исследовал это в течение некоторого времени, и, похоже, ничего не работает.

У меня есть родительский компонент, в котором я использую createRef

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

Затем передайте его дочернему элементу, и доступ выглядит следующим образом

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

Но в getState chartRef current всегда равен нулю

getState = () => {
        console.log(this.chartRef.current);
    };

Вот дочерний компонент

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-native reactjs react-redux react-forwardref
person Saad    schedule 09.03.2021    source источник
comment
Ваш вопрос немного неясен для меня, пытаетесь ли вы получить доступ к родительской ссылке в дочернем или дочернем элементе в родительском?   -  person Imran Shad    schedule 09.03.2021
comment
Похоже, у вас есть опечатка, так как вы не закрываете > для ребенка <Child ref={this.chartRef}> </Child>   -  person Shubham Khatri    schedule 09.03.2021
comment
@ShubhamKhatri Я скопировал только соответствующую часть, чтобы все было просто и понятно, и пропустил закрывающую скобку при редактировании, мое плохое. Код на моей стороне работает нормально, проблема строго в том, что ref имеет значение null. Отредактировал мой ответ, спасибо, что указали на него   -  person Saad    schedule 09.03.2021
comment
@Saad Даже в вашем обновленном вопросе ссылка, похоже, прикреплена неправильно. Трудно найти решение, если ваша проблема не может быть воспроизведена   -  person Shubham Khatri    schedule 09.03.2021
comment
Можете ли вы создать регенерировать вашу проблему в codeandbox? Потому что некоторые из текущих ответов должны были решить вашу проблему.   -  person Mateen    schedule 09.03.2021

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать стиль обратного вызова ref. Например, вместо передачи вашего ref в качестве опоры вы можете передать ссылку на функцию типа this.handleRef

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

<Child ref={this.handleRef} />
person Nooruddin Lakhani    schedule 09.03.2021
comment
К сожалению, это не работает - person Saad; 09.03.2021

arrow_upward
0
arrow_downward

Вы можете получить доступ к дочернему компоненту в родительском с помощью ссылки, как показано ниже

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;

// 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>
    );
  }
}

вы можете попробовать этот код в примере codeandbox < / а>

person Imran Shad    schedule 09.03.2021
comment
Он работает на коде, но когда я реализовал то же самое, он все равно остается нулевым. Во время исследования я встречал похожие решения, но, к сожалению, ни одно из них не работает в моем случае. Спасибо за пример - person Saad; 09.03.2021