【问题标题】:How to make a constant that holds a piece of react native code如何制作一个包含一段反应本机代码的常量
【发布时间】:2021-10-31 23:17:18
【问题描述】:

我是原生反应的新手。 安装默认的 react natives 文件后。 我想分析他们的编码方式。 我注意到要生成干净的代码, 他们使用常量来存储特定的代码段

安装后默认反应原生示例:

 const Section = ({children, title}): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

我假设在上面的示例中我是从默认安装的代码中复制的。传递参数“children”和“title”,然后在引用/调用“Section”时使用它来生成所需的代码(有点像函数调用)。 我的问题是如何在不传递变量的情况下做同样的事情? 我尝试过这样的事情,但不允许这样做

我的代码:

const header = {
  return (
<View >
  <Image source={require('./Images/img.png')}/>
</View>
);
}

【问题讨论】:

  • 您所指的参数在 React 中称为 props。听起来您正在尝试将函数作为道具传递?这是支持的。 reactjs.org/docs/components-and-props.html
  • 我想我只是希望从另一个地方调用这段代码并工作。我不想传递你所说的任何“道具”

标签: reactjs react-native constants coding-style var


【解决方案1】:

“有点像函数调用”正是一个函数调用。它被称为箭头函数。箭头函数现在被广泛使用。

const myFirstArrowFunction = () => {
    //your function code
}

就像任何函数一样,您只需在需要时添加参数。

【讨论】:

  • 你知道“节点=>”是什么意思吗?
  • 很高兴我能帮上忙。 “=>”是箭头函数的一部分。 “节点”是指函数在这种情况下返回“节点”类型的对象的类型。 “Node”是一个 React-Element(你写的 JSX 的结果)。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-05-11
  • 2011-07-08
  • 2021-12-18
  • 2014-06-22
  • 1970-01-01
  • 2018-07-28
  • 1970-01-01
相关资源
最近更新 更多