组件的组合、嵌套和组件树

组建的创建

第一种组件的创建方式 function

  1. import React from 'react'
  2. import ReactDom from 'react-dom'
  3. function Hello(){
  4. return (
  5. <div>
  6. <h1>我是第一种组件的创建方式</h1>
  7. </div>
  8. )
  9. }
  10. ReactDom.render(<Hello />,document.querySelector('#root'))

注意

  1. 自定义的组件都必须要用大写字母开头,普通的 HTML 标签都用小写字母开头。
  2. 必须有返回值,而且返回值必须是JSX elements

第二种组件的创建方式 ES6类

  1. import React from 'react'
  2. class App extends React.Component{
  3. render(){
  4. return (
  5. <div>
  6. App
  7. </div>
  8. )
  9. }
  10. }
  11. export default App

组件内参数的传递

  1. import React from 'react'
  2. import ReactDom from 'react-dom'
  3. function Word(props){
  4. return (
  5. <p>My name is {props.name}</p>
  6. )
  7. }
  8. function Hello(){
  9. return (
  10. <div>
  11. <Word name='Liu' />
  12. </div>
  13. )
  14. }
  15. ReactDom.render(<Word />,document.querySelector('#root'))

导入CSS

  1. //插入css外部样式:
  2. import './App.css'
  3. //行内样式
  4. <h1 style={}>我是H1</h1>
  5. //行内样式的时候,样式写成对象的模式,对象是js语言所以用大括号包裹
  6. //1.{ backgroundColor:'teal', fontSize:'20px' }
  7. //2.写成一个方法,返回一个对象
  8. //3.声明一个对象
  9. //4.只要样式写为对象的方式
  10. styles(){
  11. return({
  12. box:{
  13. background:'green'
  14. };
  15. })
  16. }
  17. <h1 style={this.styles.box}>我是H1</h1>
  18. let styles={
  19. h1:{
  20. color:'#CCC',
  21. backgroundColor:'teal'
  22. },
  23. div:{
  24. width:'100vw',
  25. height:'200px'
  26. }
  27. }
  28. <h1 style={styles.h1}>我也是H1</h1>

导入图片

当作变量导入

  1. //先导入:
  2. import img from './xxx.jpg'
  3. //引用本地:
  4. "<img src={img} alt='' />"
  5. //网上图片直接引用:
  6. "<img src='[地址]' alt='' />"

组件的嵌套

子组件

  1. import React from 'react'
  2. import Header from './Header'
  3. import Main from './Main'
  4. import Footer from './Footer'
  5. class App extends React.Component{
  6. render(){
  7. return(
  8. <div className='App'>
  9. <Header />
  10. <Main />
  11. <Footer />
  12. </div>
  13. )
  14. }
  15. }
  16. export default App

父组件

  1. import React from 'react'
  2. import ReactDom from 'react-dom'
  3. import App from './App'
  4. ReactDom.render(<App />,document.querySelector('#root'))

组件树

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. class Title extends React.Component {
  4. render(){
  5. return (
  6. <h1>React</h1>
  7. )
  8. }
  9. }
  10. class Header extends Component {
  11. render () {
  12. return (
  13. <div>
  14. <Title />
  15. <h2>This is Header</h2>
  16. </div>
  17. )
  18. }
  19. }
  20. class Main extends Component {
  21. render () {
  22. return (
  23. <div>
  24. <h2>This is main content</h2>
  25. </div>
  26. )
  27. }
  28. }
  29. class Footer extends Component {
  30. render () {
  31. return (
  32. <div>
  33. <h2>This is footer</h2>
  34. </div>
  35. )
  36. }
  37. }
  38. class Index extends Component {
  39. render () {
  40. return (
  41. <div>
  42. <Header />
  43. <Main />
  44. <Footer />
  45. </div>
  46. )
  47. }
  48. }
  49. ReactDOM.render(<Index />,document.getElementById('root'))

组件可以和组件组合在一起,组件内部可以使用别的组件。就像普通的 HTML 标签一样使用就可以。这样的组合嵌套,最后构成一个所谓的组件树。

组件树