将组件定义为常量答案

【问题标题】：Define component as constant将组件定义为常量
【发布时间】：2018-11-26 14:36:39
【问题描述】：

我正在学习 React Native 课程，有时老师使用以下代码将组件定义为 constnat：

const Comment = (props) =>
  <Text>{props.text}</Text>

但是我没有设法使它工作。我做了一个零食来单独尝试该组件，但它不起作用：https://snack.expo.io/S1eKSeV-7

我总是收到错误Invariant Violation: element type is invalid.

我做错了什么？

【问题讨论】：

标签： reactjs react-native components

【解决方案1】：

这将起作用：

const Comment = (props) => {
  return (
    <Text>{props.text}</Text>
  );
};

【讨论】：

我认为这完全一样。无论如何，尝试了相同的行为

【解决方案2】：

您没有导出组件。这就是您收到错误的原因，因为 Comment 组件未定义。

import React from 'react'
import {Text} from 'react-native'

const Comment = (props) =>
  <Text>{props.comment.text}</Text>

export default Comment

【讨论】：

@Rashomon 更新了答案。它应该是props.comment.text
糟糕.. 非常感谢！

【解决方案3】：

这是一个功能组件。 React 中有两种类型的组件：函数式组件和类组件。如果您不需要任何状态或在组件中不使用任何生命周期方法，您可以并且应该使用功能组件。

功能组件

const SomeComponent = () => <div>Something</div>;

这里不需要使用显式返回，因为如果只有一个语句，箭头函数会为我们执行此操作。

普通函数：

function SomeComponent() { return <div>Something</div> };

类组件

class SomeComponent extends React.Component {
    state = { foo: "bar" };
    someLifeCycleMethod() {
       ....
    }
    render() {
        return( <div>Something</div>);
    }
}

如果您有不明白的地方，请随时参考official documentation。

您遇到的问题与组件类型没有直接关系。正如另一个答案中所建议的那样，您的组件可能没有被导出。

【讨论】：