In the last lesson, we see how to use props and how to recive them as an argument and output them dynamially in our code using 儿童财产 .

儿童财产

现在，我们还希望超越自定义组件的开始标记和结束标记之间传递的所有内容。

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
	render() {
		return (
			<div className="App">
				<Person name="Max" age="12">
           My Hobbies : Dancing {/* Some Additional Data */}
				</Person>
			</div>
		);
	}
}
export  默认  App;

And that is actually super simple too. there is an special prop we can access, react gives us access to it, to be precise. In the Person component where we want to recive it in the end will wrap our paragraph in normal parentheses, so that I can write this over multiple lines.

import 反应from 'react';
const person = props => {
	return (
		<div>
			<p>
				I am a {props.name} and i am {props.age} year old!{' '}
			</p>
			<p> {props.children} </p>
		</div>
	);
};
export  默认  person;

So we have wrapped our existing and new p element inside the container div element. the second p element will output the content which we have passed between the Person element in src / App.js .
It can be simply done by outputting the dynamic content inside { /* Props 儿童财产 */ } i.e {props.children} property.
孩子们 is a word which we did noot pass anything as 孩子们 on our Person component, We only pass name and age attributes. 孩子们 reffers to any elements and this includes plain text as we have entered between the Person component. You can also nest complex HTML in between that dosent just have to be text it could be an ordered (ol) or unordered(ul) list or a 其他 react component.
运行该应用程序后，您可以看到在主要段落之后打印了这些爱好。

结论

You can put your content into your component from outside, Not only by passing props, but if you want to pass some structured HTML content, also by placing in between the compoenent tag and accessing it with props.children.

反应introduction
反应Component