另一个组件中的 Reactjs Ref

Question

I'm making a button generator using react. So, when user click get code, it'll get outerHTML of Green Button(Whatsapp button) . But in react, what i know to get element is using ref. the problem is the Green button different components with Get The Code button.
Here is my code.

import React from 'react';

import ButtonCanvas from '../containers/buttonCanvas';
import ButtonGroup from './buttonGroup';

import SectionHeading from '../../commons/SectionHeading';
import TabComponent from '../../commons/tabs';

const ButtonBuilder = () => {
  const items = [
    {
      name: 'HTML Code',
      content: "Result 1",
    },
    {
      name: 'JS Code',
      content: 'Result 2',
    },
    {
      name: 'CSS Code',
      content: 'Result 3',
    },
  ];
  return (
    <div>
      <SectionHeading headingText="Button Setup" />
      <ButtonCanvas />
      <ButtonGroup />
      <TabComponent
        tabList={items}
        activeTab={items[0].name}
        tabStyle="is-medium"
        additionalClass="is-fullwidth"
      />
    </div>
  );
};

export default ButtonBuilder;

ButtonCanvas is Green Button Component and ButtonGroup is component of Get The Code Button
So, when user click ButtonGroup it will get ref value from ButtonCanvas and place it to const items

Answer 1

one way to pass a value of the ref from the <ButtonCanvas /> component is to save the value of the ref into a state in your parent component and then passing the state to the other child of your app like this <ButtonCanvas {...this.state} /> then you can access the state from your child element as a props you can find in this link a basic example on how to pass data between element

https://gist.github.com/sebkouba/a5ac75153ef8d8827b98