React 基础笔记(卡槽)(十一)

React

发布日期: 2019-12-03

更新日期: 2019-12-08

文章字数: 312

阅读时长: 1 分

阅读次数:

不具名卡槽,直接使用

在 React 中要是想传递 html 必须借助 children prop 来渲染

例如父组件

function FancyBorder(props) {
  return (
    <div className={'FancyBorder-' + props.color}>
      /*重点来了*/
      {props.children}
    </div>
  )
}

子组件

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">welcome</h1>
      <p className="Dialog-message">Thank you for you visting!</p>
    </FancyBorder>
  )
}

这样的话子组件通过传递 props.children 来渲染父组件传递的 html

带有名称的卡槽

有的时候我们要传递的 html 不止一处,所以需要命名卡槽

通过传递 left,right

function SolitPane(props){
   return (
     <div class="SplitPane">
      <div class="left">
          {props.left}
      </div>
         <div class="right">
        {props.right}
         </div>
     </div>
   )
}
function App(){
 return (
    <SolitPane
    left={<Contacts/>}
    right={<Chat/>}
    >
 )
}

卡槽和属性一起传递

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">{props.title}</h1>
      <p className="Dialog-message">{props.message}</p>
      {props.children}
    </FancyBorder>
  )
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSignUp = this.handleSignUp.bind(this)
    this.state = { login: '' }
  }

  render() {
    return (
      <Dialog
        title="Mars Exploration Program"
        message="How should we refer to you?"
      >
        <input value={this.state.login} onChange={this.handleChange} />

        <button onClick={this.handleSignUp}>Sign Me Up!</button>
      </Dialog>
    )
  }

  handleChange(e) {
    this.setState({ login: e.target.value })
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`)
  }
}