react组件

import React from 'react'
import ReactDOM from 'react-dom'
// 函数式组件
function Childcom() {
  const title = <h2>我是副标题</h2>
  const weather = '下雨'
  // 条件判断
  const isGo = weather == '下雨' ? '不出门' : '出门'
  return (
    <div>
      <h1>函数式组件Hello World</h1>
      <h3>{ title }</h3>
      <span>是否出门? { isGo } </span>
    </div>
  )
}
ReactDOM.render(<Childcom />, document.getElementById('root'))
复制代码

// 函数式组件
function Childcom(props) {
  const title = <h2>我是副标题</h2>
  // 条件判断
  const isGo = props.weather == '下雨' ? '不出门' : '出门'
  return (
    <div>
      <h1>函数式组件Hello World</h1>
      { title }
      <span>是否出门? { isGo } </span>
    </div>
  )
}
ReactDOM.render(<Childcom weather="下雨" />, document.getElementById('root'))
复制代码

// 类组件
// HelloWorld组件继承于react的componet对象
class HelloWorld extends React.Component {
    render() {
        return (
            <div>
                <h1>类组件定义Hello World</h1>
            </div>
        )
    }
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
复制代码

import React from 'react'
import ReactDOM from 'react-dom'
// 函数式组件
function Childcom(props) {
    console.log(props)
  const title = <h2>我是副标题</h2>
  // 条件判断
  const isGo = props.weather == '下雨' ? '不出门' : '出门'
  return (
    <div>
      <h1>函数式组件Hello World</h1>
      { title }
      <span>是否出门? { isGo } </span>
    </div>
  )
}
// 类组件
// HelloWorld组件继承于react的componet对象
class HelloWorld extends React.Component {
  constructor(props) {
    super(props)
    this.state = {} 
  }
    render() {
        return (
            <div>
                <h1>类组件定义Hello World</h1>
                <Childcom weather={ this.props.name } />
            </div>
        )
    }
}
ReactDOM.render(<HelloWorld name="下雨" />, document.getElementById('root'))
复制代码