何时使用this.props.children以及为什么

Question

我正在读这个文件https://github.com/luispcosta/reddit_clone/blob/master/client/components/Main.jsx

而且我没有得到第37行，this.props.children来自哪里？ 我知道你可以传递道具

<Component name='alan'/>

你可以通过this.props.name得到alan来获得名字。 但这个props.children意味着什么？

Answer 1

在包含开始标记和结束标记的JSX表达式中，这些标记之间的内容作为特殊prop：props.children传递。 通过孩子有几种不同的方法：

https://facebook.github.io/react/docs/jsx-in-depth.html#children-in-jsx

例如：

<Main>
  <p>This is a child element</p>
  <button>So is this</button>
</Main>

Main this.props.children将是一个元素数组。

// Main.jsx    
render() {
  return <div>
    {this.props.children}
  </div>;
}

会渲染

<div>
  <p>This is a child element</p>
  <button>So is this</button>
</div>

Answer 2

在反应中，JSX中的元素表示为

const elem = (<div id="test"> Hi I am a div. </div>);

还有另一种表示反应元素的替代方法。 所以类似的元素可以表示为 -

var elem = React.createElement(
    "div",
    { id: "test" },
    " Hi I am a div. "
);

createElement具有以下签名：

React.createElement(component, props, ...children)

以上...children表示div任何嵌套JSX元素。

嵌套元素本身可以是另一个反应元素 ，可能不止一个。

const elem = (<div id="test"> <h1> Hi I am a div. </h1> </div>);

什么是props.children？

返回的元素包含轻量级对象表示。

它有一个名为props set的字段。 此props字段包含传递的自定义属性和对嵌套元素（即子元素）的引用。

现在让我们看看它是如何表示的

 const elem = (<div id="test">Hi I am a div.</div>); console.dir(elem); const elem1 = (<div id="test"> <h1> Hi I am a div. </h1> </div>); console.dir(elem1); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

从日志中我们可以看到， props有一个叫做物业children 。 因此每个父元素都包含对其children 元素的直接引用。

"props": {
    "id": "test",
    "children": "Hi I am a div."
  }

我什么时候可以使用props.children？

什么时候你想要访问代码中的子元素。 可能存在您想要访问所有嵌套元素的场景。

最简单的例子 -

您已创建如下自定义按钮 -

 class MyButton extends React.Component { render() { return <button> {this.props.children} </button>; } }; // What ever you pass insede <MyButton> and </MyButton> // You can access it inside your MyButton component via {this.props.children} const elem = (<MyButton> test1 </MyButton>); ReactDOM.render( elem, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> </div> 

另一种情况可能是你希望循环嵌套的孩子，可能会传递一些其他额外的道具或者可能只是访问它们 -

 class MyButton extends React.Component { render() { return ( <button onClick={this.props.handleClick}> {this.props.children} </button> ); } }; class ButtonContainer extends React.Component { handleClick = () => { console.log("Clicked"); } render() { const childrenWithProps = React.Children.map(this.props.children, (child) => { return React.cloneElement(child, { handleClick: this.handleClick }); }); return ( <div> {childrenWithProps} </div> ); } }; const elem = ( <ButtonContainer> <MyButton> test1 </MyButton> <MyButton> test2 </MyButton> <MyButton> test3 </MyButton> </ButtonContainer> ); ReactDOM.render( elem, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> </div> 

还有其他方案还有react-router，例如路由更改时，您希望访问子元素以在屏幕上呈现它们。

我尽可能地包含了工作代码和示例。 我希望这可以帮助你。

Answer 3

很简单。 我将通过一个例子解释让我们说你已经创建了一个名为ComponentDemo的组件 。 它是这样使用的：

<ComponentDemo>
 // This component can receive some HTML tags here that will be passed as children props for example:
     <div> Hello world</div>
</ComponentDemo>

然后，在ComponentDemo渲染函数中，您可以将其用作：

render(){
 // lets use the HTML tags we passed as children here 
    {this.props.children}
}

会发生什么？ ComponentDemo将呈现

   <div> Hello world</div>

这是props.children传递的值

Answer 4

您可以查看react-router的API参考

因此，它只是react-router提供的api，它是在https://github.com/luispcosta/reddit_clone/blob/master/client/routes.js中导入的。

const routes = (
  <Route path="/" component={App}>
    <Route path="groups" component={Groups} />
    <Route path="users" component={Users} />
  </Route>
)

class App extends React.Component {
  render () {
    return (
      <div>
        {/* this will be either <Users> or <Groups> */}
        {this.props.children}
      </div>
    )
  }
}