我正在使用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
答案 0 :(得分:1)
从<ButtonCanvas />
组件传递ref的值的一种方法是将ref的值保存到父组件中的状态,然后将状态传递给应用程序的另一个子项,如下所示{ {1}}
然后你可以从你的子元素访问状态作为道具
您可以在此链接中找到有关如何在元素