反应嵌套组件渲染问题

Question

这是我的代码

const Parent = (props) => <div> {props.children} </div>

it works: 

<Parent> <a href="/google">Click here </a> </Parent> 


This doesn't work 
<Parent> <Abutton /> </Parent> 

const Abutton = (props) => <a href="/google">Click here </a>

这是问题

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) 

Answer 1

1. 您错误地添加了</props>而不是</div>来关闭标签。

const Parent = (props) => <div> {props.children} </div>

1. <Abutton />需要关闭。

我在这里附上了工作片段。

const Parent = (props) => <div> {props.children} </div>

const AButton = (props) => <a href="/link"> Link </a>


ReactDOM.render(
  <Parent><AButton /></Parent>,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>