在react native中动态地用id包装不同组件的最佳方式是什么

Question

我的react原生应用程序中几乎没有组件。我想包装一个名为"；工具提示"在react native中围绕这些元素。在react native中，最好的方法是什么。

例如

我有这样的组件

<Text id="123">content</Text>
<View id="456" >.....</View>

我想包装这些组件，并通过包装工具提示在虚拟DOM中替换它们

<Tooltip><Text id="123">content</Text></Tooltip>
<Tooltip><View id="456" >.....</View></Tooltip>

这方面的任何线索都会有所帮助！

谢谢！

Answer 1

创建一个接受任何组件的自定义包装器

const CustomTooltip = (props={}) => {
const {children: ChildComponent, id} = props
return (
<Tooltip>
<ChildComponent id={id} />
</Tooltip>
)
}

并像这样使用：

<CustomTooltip id="123"><Text>...</Text></CustomTooltip>

Answer 2

Tooltip.js

const Tooltip = ({children})=> {
return(
<View>
{children}
</View>
)
}
export { Tooltip }

App.js内部使用

import { Tooltip } from './Tooltip'
export default function App() {
return (
<Tooltip>
<Text>Hello World</Text>
</Tooltip>
);
}

碎片奖励提示

import { Tooltip } from './Tooltip'
export default function App() {
return (
<>
<Tooltip>
<Text>Hello World</Text>
</Tooltip>
<Tooltip>
<View>
<Text>Hello World 2</Text>
</View>
</Tooltip>
</>
);
}