Reactjs参考另一个组件

Question

我正在使用react做一个按钮生成器。 因此，当用户点击获取代码时，它将获得绿色按钮（Whatsapp按钮）的outerHTML。但在反应中，我所知道的元素是使用ref。问题是绿色按钮与获取代码按钮的不同组件。
这是我的代码。

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 绿色按钮组件，ButtonGroup是获取代码按钮的组成部分 因此，当用户点击ButtonGroup时，它会从ButtonCanvas获取参考值并将其放入const items

Answer 1

从<ButtonCanvas />组件传递ref的值的一种方法是将ref的值保存到父组件中的状态，然后将状态传递给应用程序的另一个子项，如下所示{ {1}} 然后你可以从你的子元素访问状态作为道具 您可以在此链接中找到有关如何在元素

之间传递数据的基本示例

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