为什么import React from 'react'，React首字母必须大写？

Posted 2021-01-09 gitnull

 

很奇怪的是，明明没有用到 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‘)
)