React 元件建立方法及父元件向子元件傳參（基礎）

天藍藍tao發表於2018-12-24
React元件

建立一個元件

1.箭頭函式

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


ReactDOM.render(
  <Fragment>
    <AwesomeHeader></AwesomeHeader>
  </Fragment>,
  document.querySelector('#app')
)
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）
2.從React.component裡繼承

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

ReactDOM.render(
  <Fragment>
    <AwesomeContent></AwesomeContent>
  </Fragment>,
  document.querySelector('#app')
)
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）
注意：

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')
)
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）
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')
)
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）

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')
)
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）

子元件向父元件傳參

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>
    )
  }
}
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）

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>
    )
  }
}
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）

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>
    )
  }
}
複製程式碼

React 元件建立方法及父元件向子元件傳參（基礎）

補充：

1.

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

export {
  AwesomeHeader,
  AwesomeContent
}
複製程式碼
export { default as AwesomeHeader } from './AwesomeHeader'
export { default as AwesomeContent } from './AwesomeContent'
複製程式碼

以上兩種寫法，效果一樣

2.

快捷鍵：

rfc:以函式的方式建立元件

rcc:以class類的方式建立元件

相關文章