React踩坑了

起步就踩坑

可给我牛逼坏了

上来在入口文件index.js里写了一段render()代码，然后看到了美丽的红色:）

{:width=”600px” height=”380px”}

疯狂百度，最后自己发现了……得把语言的类型改一下

{:width=”600px” height=”380px”}

好了……

---

关于this

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(e.target.innerHTML)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    )
  }
}

一般在类的实例方法里的this指的是实例本身，但是你在上面的handleClickOnTitle中把this打印出来，会发现this是null或者undefined

……
  handleClickOnTitle(e) {
    console.log(this) // --> null or undefined
  }
……

react中调用你传给他的方法的时候，不是通过对象方法的方式调用(this.handleClickOnTitle),而是通过函数调用，所以事件监听函数内并不能通过this获取到实例

如果要在事件函数中使用当前实例，可以用Bind

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1>
    )
  }
}

---

关于props.children

react中容器类组件和props.children很多时候能解决很多问题

有需求类似

正常写是可以写出这样的代码

class Card extends Component {
  render () {
    return (
      <div className='card'>
        <div className='card-content'>
          {this.props.content}
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Card content={
    <div>
      <h2>React.js 小书</h2>
       <div>开源、免费、专业、简单</div>
      订阅：<input />
    </div>
  } />,
  document.getElementById('root')
)

但是这样很乱而且不好维护，如果card能变成下面这样

ReactDOM.render(
  <Card>
    <h2>React.js 小书</h2>
    <div>开源、免费、专业、简单</div>
    订阅：<input />
  </Card>,
  document.getElementById('root')
)

如果组件标签能像html一样写内嵌的结构……？是吧

react提供了props.children来实现这种想法，我们打印一下props.children会发现他其实是一个数组

react就是把我们嵌套的JSX元素一个个放到数组中，然后通过这个方法传给Card

由于 JSX 会把插入表达式里面数组中的 JSX 一个个罗列下来显示。所以其实就相当于在 Card 中嵌套了什么 JSX 结构，都会显示在 Card 的类名为 card-content 的 div 元素当中。

这种嵌套的内容成为了 props.children 数组的机制使得我们编写组件变得非常的灵活，我们甚至可以在组件内部把数组中的 JSX 元素安置在不同的地方：

class Layout extends Component {
  render () {
    return (
      <div className='two-cols-layout'>
        <div className='sidebar'>
          {this.props.children[0]} <!-->h2<-->
        </div>
        <div className='main'>
          {this.props.children[1]} <!-->div<-->
        </div>
      </div>
    )
  }
}