考虑一下Angular和React在“幕后”所做的事情将是有帮助的。
在您的Angular示例中，当您编写时，
<divclassy/></div>您说的是“呈现DIV元素，然后将
classy指令定义的行为附加到该元素。
在您的React示例中，当您编写时
<MyComponentclassy></MyComponent>，您说的是：“创建MyComponent实例并将其传递给props
{ classy: true}。编译器（Babel或whathaveyou）会将其转换为以下Javascript：React.createElement(MyComponent, { classy: true });因此，您的问题的答案是您无法编写文字，
<MyComponentclassy></MyComponent>因为
MyComponent组件不知道如何处理该
classy道具。在React中，您可以这样写：
class ClassyDiv extends React.Component { render() { const { className, ...rest } = this.props; return <div className={`${className || ''} stay-classy`} {...rest}/>; }}之所以可行，是因为我们知道该
React.DOM.div组件（像大多数DOM组件一样）知道如何处理该
className道具。
从React 0.14开始，我们可以更简单地将此类内容表示为“纯”无状态功能组件，即接受props并返回渲染结果的函数：
function AlsoClassyDiv(props) { const { className, ...rest } = props; return <div className={`${className || ''} stay-classy`} {...rest}/>;};您可以在下面的代码片段中看到两种方法都在起作用。
class ClassyDiv extends React.Component { render() { const { className, ...rest } = this.props; return <div className={`${className || ''} stay-classy`} {...rest}/>; }}function AlsoClassyDiv({ className, ...props }) { return <div className={`${className || ''} stay-classy`} {...props}/>;};ReactDOM.render( <div id="container"> <div>Regular div</div> <ClassyDiv>ClassyDiv!</ClassyDiv> <AlsoClassyDiv>AlsoClassyDiv!</AlsoClassyDiv> </div>, document.body);.stay-classy { font: bold 3em Helvetica; text-shadow: 4px 4px 2px #aaa; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
