减少 React Native 中的重复代码答案

【问题标题】：Reduce repeating code in React native减少 React Native 中的重复代码
【发布时间】：2018-08-25 16:08:28
【问题描述】：

目前我正在做一个项目，我的一些代码块被重复了几次。由于再次复制相同的代码并不是最佳实践，因此我想在render 函数之外创建一个函数，并在需要时使用字符串值调用它。

例如：

getInfo(name,age,address)
{
   return (
      <View> 
        <Text> {name} </Text>
        <Text> {age} </Text>
        <Text> {address} </Text>
      </View>
   )
}

如上面的代码所示，我想得到这样的回报。之后，我尝试使用getInfo('adam',46,'UK') 简单地调用渲染内部的函数。但似乎它不起作用。

问题

如何正确创建getInfo 方法，该方法将返回带有字符串参数的HTML 代码？以及如何在render 函数中调用它？

更新

当我在render 中调用函数时。它不做任何事情。我只是按照我展示的那样调用了该函数。

【问题讨论】：

您正在寻找一个自定义组件，它是 React 的基本构建块。以下是如何声明和使用一个：codesandbox.io/s/n56m5q43xp（使用render方法中的函数添加）
你说的好像不行。请说明你使用它时发生了什么（如果有错误也显示出来）。
相关文档条目：reactjs.org/docs/components-and-props.html

标签： javascript html react-native

【解决方案1】：

如果你想完全按照你说的做，我找不到你的 getInfo 方法的问题。

所以，

getInfo(name,age,address)
{
   return (
      <View> 
         <Text> {name} </Text>
         <Text> {age} </Text>
         <Text> {address} </Text>
      </View>
    )
}

而且你不能简单地在 return 中调用函数。只需检查以下示例。

render()
{
   return (
      <View>
      {
        this.getInfo('adam',46,'UK')
      }
      </View>
  )
}

这将为您提供您所期望的。

【讨论】：