美元符号($)REACT/ES2015

Question

我注意到，当呈现"动态内容"时，似乎在React我必须在JSX语法中使用美元符号（$）。

"动态内容"，我是指一个事实，即一个反应组件对渲染所需的内容一无所知，直到"渲染时间＆quot"之类的东西，例如将其他组件作为道具传递给其他组件...

render(){
   return(<this.props.component />)
}

但是，我注意到，在传递包含组件的变量时，我必须使用美元符号...

...
const $content = this.props.component
return(<$content />)
...

这是行不通的...

...
const content = this.props.component
return(<content />)
...

请注意，我不使用上面的美元标志

问题

任何人都可以解释这种行为吗？

我伴随着下面的代码段，说明了上述行为

const ContentComponent = () => {
  return ( 
      <div className="content">
          <h3>Content</h3>
      </div>
  )
}
const data = {
    content: ContentComponent
}
const TemplateComponent = () => {
  const $content = data.content
  
  return (   
      <div className="template">
          <h3>Template</h3>
          <p>This renders the dynamic content perfectly fine using  the dollar symbol ($)</p>
          <$content />
      </div>
  )
}
const TemplateComponent2 = () => {
  const content = data.content
  
  return (   
      <div className="template">
          <h3>Template</h3>
          <p>This fails to renders the dynamic content when NOT using  the dollar symbol ($)</p>
          <content />
      </div>
  )
}
ReactDOM.render( 
    <div>
        <TemplateComponent />
        <TemplateComponent2 />
    </div>,
    document.getElementById('root')
);

body {
 font-family: Arial;
 letter-spacing: 2px;
}
h3 {
 padding: 0;
 margin: 0;
}
.template {
    margin: 50px auto;
    width: 400px;
    background-color: #E57373;
    padding: 20px;
    color: #E0E0E0;
}
.content {
    margin: 50px auto;
    background-color: #E0E0E0;
    padding: 20px;
    color: #E57373;
}

<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>

<div id="root">
</div>

Answer 1

我相信这与命名有关。JSX将组件的名称解释为第一个字符是html标签中的下部字母。

您可以在这里阅读更多：https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-reacct-components

，但基本上，

• <component />编译到React.createElement('component')（HTML标签）
• <Component />编译到React.createElement(Component)
• <$component />编译到React.createElement($component)

因此，如果您在代码段中编辑这两行，它将起作用（我尝试过）

const content = data.content

to

const Content = data.content

和

<content />

to

<Content />