在 react-native 中动态包装不同组件的最佳方法是什么？答案

【问题标题】：what is the best way to wrap different components with ids in react-native dynamically?在 react-native 中动态包装不同组件的最佳方法是什么？
【发布时间】：2020-08-11 21:08:11
【问题描述】：

我的 react-native 应用程序中的组件很少。我想在 react-native 中围绕这些元素包装一个名为“Tooltip”的组件。在 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>

朝这个方向的任何线索都会有所帮助！

谢谢！

【问题讨论】：

我觉得你做的是有效率的方法，你有遇到这样的问题吗？请提及
@VarunS 我还没做。我想知道是否有任何软件包或工具可以帮助我做到这一点。为此，我必须根据 id 搜索该组件并替换它。我不确定如何在虚拟 DOM 中动态替换它

标签： javascript reactjs react-native frontend android-espresso

【解决方案1】：

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

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

并像这样使用：

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

【讨论】：

【解决方案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>
    </>
  );
 }

【讨论】：