Question

我注意到渲染＆＃34;动态内容＆＃34;在React中我必须在JSX语法中使用美元符号（$）。

通过＆＃34;动态内容＆＃34;，我指的是React组件对于它需要渲染的内容一无所知直到＆＃34;渲染时间＆＃34;，类似于将其他组件作为道具传递......

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

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

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

这不会起作用......

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

请注意，我没有使用上面的美元符号

问题

有人可以解释一下这种行为吗？

我附上了一段代码片段，说明了上述行为

＆＃13;

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')
);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我认为这与命名有关。 JSX解释组件的名称，第一个字符是小写字母作为html标签。

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

但基本上，

<component />编译为React.createElement('component')（html标记）
<Component />汇编为React.createElement(Component)
<$component />汇编为React.createElement($component)

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

const content = data.content

到

const Content = data.content

和

<content />

到

<Content />

React / ES2015中的美元符号（$）

问题

1 个答案: