Question

在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

Answer 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组件有一个＆＃34;类型＆＃34;属性就像React docs所解释的那样。您可以在此处找到更多信息React Elements vs React Components

Answer 2

那是stateless component。它只是一个根据一些道具吐出HTML的函数。

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

2 个答案: