react组件使用的三种方式

①以标签的形式使用，并以导包的方式导入即可，代码如下：

//   ./代表当前根目录下查找Body, .js文件后缀可以省略，
//   ./不能省略，要不系统会以为你在引入第三方模块，就会到我们的第三方包里去找
import Body from './Body';

function App() {
    return (
      <div className="App">
        <Body/>
      </div>
    );
}

这个时候运行我们的项目，在浏览器中打开就会将Body.js里的内容显示在页面上。

②
也可以以参数的形式传递

import ComponentFooter from './Footer';

class Index extends React.Component{
  render(){
    //组件也可以通过参数的方式传递
    var component = <ComponentFooter/>;
    return(
      <div>
        {component}
      </div>
    )
  }
}

③插入到指定的Dom节点

//这是我们的index.html
<div id="example"></div>

//这是我们的ComponentFooter.js文件
//相当于一个程序的入口
ReactDOM.render(<ComponentFooter/>,document.getElementById('example'));

react组件使用的三种方式

推荐阅读更多精彩内容