React 如何知道一个函数是否是一个组件？答案

【问题标题】：How does React know if a function is a component or not?React 如何知道一个函数是否是一个组件？
【发布时间】：2016-08-18 11:33:28
【问题描述】：

在 React docs 中，它说函数组件需要有一个类类型 -

当 React 看到一个具有函数或类类型的元素时，它知道询问该组件它呈现给什么元素，给定相应的道具。

const Button = ({ children, color }) => ({
  type: 'button',
  props: {
    className: 'button button-' + color,
    children: {
      type: 'b',
      props: {
        children: children
      }
    }
  }
});

但是在 Dan Abramov 的 react-redux example 中，他的展示组件在任何地方都没有类类型，那么 React 怎么知道下面是一个组件呢？是因为它有propTypes吗？

import React, { PropTypes } from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

export default Todo

【问题讨论】：

标签： reactjs

【解决方案1】：

您使用的第一个 Button 示例是 JSX 最终将转译的内容（这就是为什么它看起来与第二个 Todo 示例如此不同的原因）。一旦你的 Todo 组件通过 Babel 运行，那个 JSX 就会变成这样的对象，

const Todo = ({ onClick, completed, text }) => ({
  type: 'li',
  props: {
    children: text,
    style: {
      textDecoration: completed ? 'line-through' : 'none'
    },
    onClick: onClick
  }
})

因此，在一天结束时（或转译），我们的 Todo 组件具有“type”属性，正如 React 文档所解释的那样。你可以在这里找到更多信息React Elements vs React Components

【讨论】：

【解决方案2】：

那是stateless component。它只是一个基于一些 props 吐出 HTML 的函数。

【讨论】：