React 组件创建方法及父组件向子组件传参（基础）-CSDN博客

创建一个组件

1.箭头函数

const AwesomeHeader =() => {
    return (<h1>react1</h1>)
}


ReactDOM.render(
  <Fragment>
    <AwesomeHeader></AwesomeHeader>
  </Fragment>,
  document.querySelector('#app')
)
复制代码

2.从React.component里继承

class AwesomeContent extends.component {
    render () {
        return (<h1>react2</h1>)
    }
}

ReactDOM.render(
  <Fragment>
    <AwesomeContent></AwesomeContent>
  </Fragment>,
  document.querySelector('#app')
)
复制代码

注意：

1.React的组件必须是大写字母开头

2.组件可嵌套，在react的 jsx (javascript + xml)里，如果是 空元素 （没有子元素）,推荐使用自闭合

class App extends Component {
  render() {
    return (
        <div>
            <AwesomeHeader></AwesomeHeader>
            <AwesomeContent></AwesomeContent>
        </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#app')
)
复制代码

3.每一个组件渲染的最外层，只有一个div根元素

4.在react 16之后新增了一个Fragment组件：用于替换最外层的根元素（如果你不想多一层根元素的情况下）

<Fragment>
    <AwesomeHeader></AwesomeHeader>
    <AwesomeContent></AwesomeContent>
</Fragment>
复制代码

JSX

在jsx里要写js代码的时候，需要用 {}

**注意：**JSX里面只能写表达式

class AwesomeContent extends React.Component {
  render() {
    return (
      <div style={{ color: '#f66' }}>
        <p>{ 1+1 }</p>
        <p>{ 1+1 === 2 ? '真牛！' : '真傻' }</p>
      </div>
    )
  }
}

ReactDOM.render(
  <AwesomeContent />,
  document.querySelector('#app')
)
复制代码

class AwesomeContent extends React.Component {
  render() {
    return (
      <div style={{ color: '#f66' }}>
        <p>{ 1+1 }</p>
        <p>{ 1+1 === 3 ? '真牛！' : '真傻' }</p>
      </div>
    )
  }
}

ReactDOM.render(
  <AwesomeContent />,
  document.querySelector('#app')
)
复制代码

子组件向父组件传参

props.children

1.以箭头函数创建的组件

想要获取props,需要在函数的参数里通过一个形参去获取

//子组件
const AwesomeHeader = (props)  => {
  console.log(props)
  const headerText = 'awesome react'
  return (
    <h1>{headerText} - {props.children}</h1>
  )
}

//父组件
class App extends Component {
  render() {
    return (
      <Fragment>
        <AwesomeHeader>Hello</AwesomeHeader>
      </Fragment>
    )
  }
}
复制代码

2.以从React.component里继承的方式创建组件

react里props.children是一种特殊的props，就表示一个组件的子元素

由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取

//子组件
class AwesomeContent extends React.Component {
  render() {
    console.log(this.props)
    return (   
      <div>
        <h4>{this.props.children}</h4>
        react2
      </div>
    )
  }
}

//父组件
class App extends Component {
  render() {
    return (
      <Fragment>
        <AwesomeContent><div>awesome content 1</div></AwesomeContent>
      </Fragment>
    )
  }
}
复制代码

props

1.以箭头函数创建的组件

想要获取props,需要在函数的参数里通过一个形参去获取

//子组件（ AwesomeHeader是一个函数式的组件，所以可以在内部通过props.属性名来访问）
const AwesomeHeader = (props)  => {
  console.log(props)
  // 调用一个父组件传递过来的方法
  props.logFn()
  return (
    // 调用一个父组件传过来的值
    <h1>{props.headerText}</h1>
  )
}

//父组件（所以想要传递参数，直接在子组件调用的地方写属性, 属性除了字符串以外，都要用{}）
export default class App extends Component {
  render() {
    return (
      <Fragment>
        <AwesomeHeader
          headerText="Niubility React"
          logFn={() => {
            console.log('从app传过来的方法')
          }}
        />
      </Fragment>
    )
  }
}
复制代码

2.以从React.component里继承的方式创建组件

由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取

//子组件（ AwesomeContent是一个继承式的组件，所以可以通过this.props.属性名来访问）
export default class AwesomeContent extends Component {
  render() {
    console.log(this.props)
    // 调用一个父组件传递过来的方法
    this.props.logFn()
    return (   
      <div>
        <h4>{this.props.headerText}</h4>
        react2
      </div>
    )
  }
}

//父组件（所以想要传递参数，直接在子组件调用的地方写属性, 属性除了字符串以外，都要用{}）
export default class App extends Component {
  render() {
    return (
      <Fragment>
        <AwesomeContent
          headerText="Niubility React"
          logFn={() => {
            console.log('从app传过来的方法')
          }}
        />
      </Fragment>
    )
  }
}
复制代码

补充：

import AwesomeHeader from './AwesomeHeader'
import AwesomeContent from './AwesomeContent'

export {
  AwesomeHeader,
  AwesomeContent
}
复制代码

export { default as AwesomeHeader } from './AwesomeHeader'
export { default as AwesomeContent } from './AwesomeContent'
复制代码

以上两种写法，效果一样

快捷键：

rfc:以函数的方式创建组件

rcc:以class类的方式创建组件