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

问题描述：

在阵营docs，它说，功能部件需要有一个类类型 -React如何知道函数是否是一个组件？

如果REACT看到一个元素与函数或类类型，它知道问这个组件它呈现什么元素，给道具相应的。

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

但在丹阿布拉莫夫反应，终极版example，他的表象组件没有类类型的任何地方，那么，如何做出反应知道下面是一个组成部分？是因为它有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

答

这是一个stateless component。这只是一个基于某些道具吐出HTML的函数。

答

您使用的第一个Button示例是JSX最终将转换为的内容（这就是为什么它看起来与第二个待办事例不同）。一旦你的待办事项组件获得通过通天塔运行，这JSX会变成这样一个对象，

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

于是，在一天（或transpilation）的结束，我们的Todo组件有一个“类型”属性一样React文档解释。你可以在这里找到更多信息React Elements vs React Components

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

相关推荐