Question

我遵循React Native课程，在某些时候，教师使用以下代码将组件定义为constnat：

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

但是我没有设法让它发挥作用。我做了一个小吃，只是单独尝试组件，它不起作用：https://snack.expo.io/S1eKSeV-7

我总是收到错误不变违规：元素类型无效。

我做错了什么？

Answer 1

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

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

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

export default Comment

Answer 2

这是一个功能组件。 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。

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

Answer 3

这将有效：

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

将组件定义为常量

3 个答案: