JSX 解析有所不同

[MuYunyun]

class Todo extends Component {
  constructor() {
    super()
    this.state = {
      items: ['foo', 'bar'],
    }
  }

  render() {
    console.log('renderParent')
    return (
      <div>
        <List items={this.state.items} />
      </div>
    )
  }
}

class List extends Component {
  render() {
    console.log('renderItem', this.props.items)
    return (
      <ul>
        {
          this.props.items.map(item =>
            <li key={item}>{item}</li>
          )
        }
      </ul>
    )
  }
}

下面两种情况 JSX 解析有所不同：

<ul>
  {
    this.props.items.map(item => // 针对这种情况 JSX 有所不同
      <li key={item}>{item}</li>
    )
  }
</ul>

与

<ul>
  <li>123</li>
  <li>456</li>
</ul>

目前测试的是 this.props.items.map(item => <li>{item}</li>) 这样一层遍历的，后续如果有多层嵌套也许还会有所变化。

另外修复了个由于 '' ? 1 : 0 判断失误的 bug。

完整版测试用例

class Todo extends Component {
  constructor() {
    super()
    this.state = {
      items: ['foo', 'bar'],
    }

    this.add = this.add.bind(this)
  }

  add(value) {
    const items = this.state.items.slice()
    items.push(value)

    this.setState({
      items,
    })
  }

  render() {
    console.log('renderParent', this.state.items)
    return (
      <div>
        <List items={this.state.items} />
        <Form add={this.add} />
      </div>
    )
  }
}

class List extends Component {
  render() {
    console.log('renderItem', this.props)
    return (
      <ul>
        {
          this.props.items.map(item =>
            <li key={item}>{item}</li>
          )
        }
      </ul>
    )
  }
}

class Form extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: ''
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange({ target }) {
    this.setState({
      value: target.value,
    })
  }

  render() {
    console.log('renderForm', this.props)
    const { add } = this.props
    return (
      <div>
        <input
          value={this.state.value}
          onChange={this.handleChange}
        />
        <button onClick={() => add(this.state.value)}>+</button>
      </div>
    )
  }
}