另一個組件中的 Reactjs Ref

Question

我正在使用 react 制作按鈕生成器。 因此，當用戶單擊獲取代碼時，它將獲取Green Button(Whatsapp button) 的外層HTML 。 但是在反應中，我所知道的獲取元素是使用 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獲取 ref 值並將其放置到const items

Answer 1

從<ButtonCanvas />組件傳遞 ref 值的一種方法是將 ref 值保存到父組件中的狀態中，然后將狀態傳遞給應用程序的另一個子組件，如下所示<ButtonCanvas {...this.state} />然后你可以從你的子元素訪問狀態作為道具你可以在這個鏈接中找到一個關於如何在元素之間傳遞數據的基本示例

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