為什么import React from 'react'，React首字母必須大寫？

 

很奇怪的是，明明沒有用到 React，但是我不得不 import React。這是為什么？

import React from 'react'; export default function (props) { return ( <form className="signIn" onSubmit={props.onSubmit}> {/* 登錄*/} <form className="signIn" onSubmit={props.onSubmit}> {/* 登錄*/} ...

 

答：把jsx編譯到js需要調用一個函數, 這個函數在React叫React.createElement.

import React from 'react'; const comp = () => ( <div>something...</div>
); //...

// 編譯 JSX 后：
 import React from 'react'; const comp = () => ( React. createElement('div', null, 'something...' ) ); //這是個約定熟成，不大寫，babel編譯會出錯

 

 

---

 

"extends React.Component" 刪掉行不行？

答：不行，刪掉的話頁面就是空白的了。說明自定義標簽必須繼承 React.Component。試試把 render 函數變成其他名字，也不行。且Welcome首字母要大寫！

//import 略
 class Welcome extends React.Component { render() { return <h1>Hello, Component</h1>;
 } } ReactDOM.render( <Welcome/>,
  document.getElementById('root') )