Question

React中的props.children是什么？

这些孩子的定义是什么？

它们是否在组件的渲染方法中定义？我认为是的。

孩子总是被渲染吗？如果是，那么为什么在使用react-router时我需要手动将{this.props.children}放入render方法中？这有什么用呢？

这就是我的意思：

// modules/App.js
// ...
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>

        {/* add this */}
        {this.props.children}

      </div>
    )
  }
// ...

取自this教程。

由于循环定义，这怎么不会爆炸？

Render方法定义props.children中的内容，但render方法本身包含props.children。

为什么这不是问题？

为什么首先需要制定这个循环定义？

我很困惑。

编辑：

index.js：

import React from 'react'
import { render } from 'react-dom'
import App from './modules/App'
import { Router, Route, hashHistory } from 'react-router'


// insert into index.js
import About from './modules/About'
import Repos from './modules/Repos'

// index.js
// ...
render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            {/* make them children of `App` */}
            <Route path="/repos" component={Repos}/>
            <Route path="/about" component={About}/>

        </Route>

    </Router>
), document.getElementById('app'))

Answer 1

这个答案的线索是children生活在组件的props之下。基本上，this.props.children只不过是组件的属性。虽然这是一个有点特殊的prop和一个不透明的数据结构，但它仍然是prop。

这意味着render 不定义this.props.children是什么。与任何其他prop一样，children从父组件传递到子组件。关于this.props.children没有什么奇妙的特殊之处，除了它作为一种方便的内置方式将任意内部元素从父级传递给子级。

将children传递给这样的组件：

<MyComponent>
    <div>Hello</div>
    <div>World</div>
</MyComponent>

与这样做并没有什么不同（实际上你可以这样做，但这样做会很愚蠢，因为你最终会绕过一些重要的React管家）：

<MyComponent children={[<div>Hello</div>, <div>World</div>]} />

所以，这里没有循环逻辑。组件从其直接父级接收children作为prop。 render唯一能做的就是定义组件的呈现方式。 render是组件的表示部分，故意与数据模型断开连接。如果您未将{this.props.children}放入render方法，那么孩子就不会被显示。

由于children与任何其他组件prop非常相似，并且它们被表示为数组，因此您可以使用Array.map方便地修改或以某种方式包装每个子项：

render() {
    <div>{this.props.children.map(function(ea){return <strong>{ea}</strong>})}</div>
}

我希望能为你解决这个问题。

使用react-router时，React的渲染方法中的循环定义

1 个答案: