11:27:12 UTC
疑问如题。举一个简单的例子：
&MyParentComponent gap={3}&
&MyChildA/&
&MyChildA/&
&MyChildB/&
&MyChildB/&
&/MyParentComponent&
上面结构中，通过MyParentComponent中的gap属性来决定它的子组件之间的margin为3像素，也就是说，在MyParentComponent的定义中，需要对this.props.children的style进行修饰。
目前我的解决办法是遍历this.props.children，同时通过React.cloneElement(child, {style: someNewStyle})来克隆出修饰过样式之后的“子组件复制品”（因为this.props.children中的子组件不可修改）。
然而这样复制出额外组件的方法显然不是最优的，而且也繁琐，难以理解。
因此发来社区求助。如果上面的描述有不详细之处，请随时提出以便我及时补充。
01:05:27 UTC
直接把gap传给MyChildX不行吗?
07:26:27 UTC
意思是直接把gap = {x}写在MyChildX元素上？问题是gap这个属性应该是MyParentComponent这个组件的特质，当我编写MyParentComponent组件时，我并不知道未来它会包含哪些子组件，也许会有MyChildA，MyChildB，也许会有MyChildC……换句话说，当我编写MyParentComponent组件的时候，我只想要它的直系子组件之间的margin为一个可写的固定值，而不管它会容纳什么子组件。
09:48:03 UTC
09:51:07 UTC
貌似需求也不多见，可不可以挂载时生成一段 css，用子元素选择器来实现
01:41:06 UTC
你这个需求的化其实用css更合适,直接强制使用子元素选择器设置子组件的margin.如果非要从React层面走的化要么利用Mixin所有的子组件都集成这个Mixin,这样的化每个组件都会包含gap这个属性.要么就是你说的这种克隆的方法,直接修改样式或者再加一层通用方便的容器节点.但是都没有直接修改css来的方便
04:18:21 UTC
感谢lpy和simongfxu朋友的回答。我突然想到为什么忽略了css，因为是在react-native项目中遇到这个问题，rn没有css。当然react.js同理，只不过可以通过css样式绕过这个问题。无论如何，我觉得react官方把this.props.children强制设置为不可写是不合理的，导致我们开发者有时需要舍近求远寻找解决方案。不知道各位对此怎么看，或者在这个问题上是不是有更好的解决办法……
08:43:09 UTC
这个问题我也遇到过，我曾经尝试了两种方式来规避，
一种肯定是CSS，这个没话说，不说多优美，反正能解决
第二种不确定是好是坏，像这样需要修改子组件样式的父级组件，我给新建了一个统一的子组件容器，例如，A 下可能会有许多个 B，这时候，我用一个固定的 C（例如叫A.Item之类的） 包裹住单个 B，这样，我要设置props的时候，只需要针对这个统一的 B 进行修改，不必关心是否每个 children 有没有处理相关的 props
A: render() {
return &div&
{this.props.children.map(function(child) {
return &A.Box style={...xxxxStyle}&child&/A.Box&;
其实，官方的意思和我平时做的东西来看，一个组件里的子组件，大多是可以再抽一个子组件的，无法再抽并且直接使用 this.props.children 的时候，往往是已经没有共性的内容了。。
11:09:01 UTC
谢谢darkty2009的回答。加一个包裹组件确实是react.js下可行的方案，而且可能是目前能找到最好的方案，唯一缺点在于多了一层额外的DOM元素。其实是不是这个A.Box也可以直接用div。另外在flex布局的react-native项目里，因为flex布局的关系，这个方案似乎不可行。
07:52:55 UTC
子组件多的话这方法不错。如果只有一个子组件，更多的是用clone方法，如果这里传递的属性是一个函数，比如说是一个事件处理函数，子组件接收这个函数来做处理
13:18:50 UTC
我其实想 可以使用在每个子组件上加一个ref~ 然后再循环ref
21:57:39 UTC
可以试试这个 pattern：还没有任何记录...
reactJs组件属性this.props
作者： 懒人建站
属性是由父组件传递给子组件的,reactJs组件属性设置,reactJs组件this.props需要注意的几点
1、获取属性的值用的是this.props.属性名
2、创建的组件名称首字母必须大写。
3、为元素添加css的
reactJs组件属性this.props是什么？
1、属性是由父组件传递给子组件的
2、this.props 表示一旦定义，就不再改变的特性，
reactJs组件属性设置
1.键值对方式设置（键 ：值）
值可以有多种形式 &&HelloWorld name= ? /&
字符串：&XiaoWang&
求值表达式 {123}、{&XiaoWang&}
数组{[1,2,3]}
变量{variable}
函数求值表达式{function}（不推荐，如果需要函数可以单独把函数提取出来然后单独调用函数）
var HelloWorld =React.createClass({
rencer:function () {
return &p&Hello,{this.props.name ? this.props.name : &World&}&/p&;
var HelloUniverse = React.createClass({
getInitialState:function () {
return {name: ''};
handleChange: function (event) {
this.setState({name: event.target.value});
render: function () {
return &div&
&HelloWorld name={this.state.name}&&/HelloWorld&
&input type=&text& onChange={this.handleChange} /&
ReactDom.render(&HelloUniverse /&,document.body);
2.展开语法{...props}
React会自动把对象中的属性和值当做属性的赋值
var HelloWorld =React.createClass({
rencer:function () {
return &p&Hello,{this.props.name1 + ' 'this.props.name2}&/p&;
var HelloUniverse = React.createClass({
getInitialState:function () {
name1:'Tim',
name2:'John',
handleChange: function (event) {
this.setState({name: event.target.value});
render: function () {
return &div&
&HelloWorld name={...this.state}&&/HelloWorld&
&input type=&text& onChange={this.handleChange} /&
ReactDom.render(&HelloUniverse /&,document.body);
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
render: function() {
return &h1& {this.props.title} &/h1&;
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
var data = 123;
ReactDOM.render(
&MyTitle title={data} /&,
document.body
这样一来，title属性就通不过验证了。控制台会显示一行错误信息
getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
title : 'Hello World'
render: function() {
return &h1& {this.props.title} &/h1&;
ReactDOM.render(&MyTitle /&,document.body);
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
var NotesList = React.createClass({
render: function() {
React.Children.map(this.props.children, function (child) {
return &li&{child}&/li&;
ReactDOM.render(
&NotesList&
&span&hello&/span&
&span&world&/span&
&/NotesList&,
document.body
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取。这里需要注意， this.props.children 的值有三种可能：
如果当前组件没有子节点，它就是 undefined；
如果有一个子节点，数据类型是 object；
如果有多个子节点，数据类型就是 array
ReactJs提供一个工具方法 React.Children 来处理 this.props.children ，我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。
1.遍历子节点：React.Children.map
object React.Children.map(object children, function fn [, object context])
在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。
如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。
2.React.Children.forEach
React.Children.forEach(object children, function fn [, object context])
类似于 React.Children.map()，但是不返回对象。
3.统计子节点组件总数：React.Children.count
number React.Children.count(object children)
返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。
4.React.Children.only
object React.Children.only(object children)
返回 children 中仅有的子级。否则抛出异常。
reactJs组件this.props需要注意的几点
1、获取属性的值用的是this.props.属性名
2、创建的组件名称首字母必须大写。
3、为元素添加css的class时，要用className.
4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}
本文链接：/javascript/react_props.html
reactJs组件属性this.props由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
(责任编辑：懒人建站)
reactJs组件属性this.props-相关文章
来自百度的搜索推荐React中ES5与ES6写法的区别总结
作者：Hi-FE
字体：[ ] 类型：转载 时间：
这篇文章主要总结介绍了关于React中ES5与ES6的写法区别，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
相信很多React的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo ponent)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。所以这篇文章就整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。下面话不多说了，来看看详细的介绍吧。
在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：
var React = require("react");
Component,
} = R //引用React抽象组件
var ReactNative = require("react-native");
} = ReactN //引用具体的React Native组件
在ES6里，import写法更为标准
import React, {
Component,
PropTypes,
} from 'react';
} from 'react-native'
导出单个类
在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出
var MyComponent = React.createClass({
module.exports = MyC
在ES6里，通常用export default来实现相同的功能：
export default class MyComponent extends Component{
引用的时候也类似：
var MyComponent = require('./MyComponent');
import MyComponent from './MyComponent';
注意：导入和导出的写法必须配套，不能混用！
在ES5里，通常通过React.createClass来定义一个组件类，像这样：
var Photo = React.createClass({
render: function() {
&Image source={this.props.source} /&
在ES6里，我们通过定义一个继承自<ponent的class来定义一个组件类，像这样：
class Photo ponent {
render() {
&Image source={this.props.source} /&
给组件定义方法
从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。
var Photo = React.createClass({
componentWillMount: function(){
render: function() {
&Image source={this.props.source} /&
class Photo ponent {
componentWillMount() {
render() {
&Image source={this.props.source} /&
定义组件的属性类型和默认属性
在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现
var Video = React.createClass({
getDefaultProps: function() {
autoPlay: false,
maxLoops: 10,
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
render: function() {
在ES6里，可以统一使用static成员来实现
class Video ponent {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}; // 注意这里有分号
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}; // 注意这里有分号
render() {
} // 注意这里既没有分号也没有逗号
也有人这么写，虽然不推荐，但读到代码的时候你应当能明白它的意思：
class Video ponent {
render() {
Video.defaultProps = {
autoPlay: false,
maxLoops: 10,
Video.propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
注意: 对React开发者而言，static成员在IE10及之前版本不能被继承，而在IE11和其它浏览器上可以，这有时候会带来一些问题。React Native开发者可以不用担心这个问题。
初始化STATE
ES5下情况类似，
var Video = React.createClass({
getInitialState: function() {
loopsRemaining: this.props.maxLoops,
ES6下，有两种写法：
class Video ponent {
loopsRemaining: this.props.maxLoops,
不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：
class Video ponent {
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
把方法作为回调提供
很多习惯于ES6的用户反而不理解在ES5下可以这么做：
var PostInfo = React.createClass({
handleOptionsButtonClick: function(e) {
// Here, 'this' refers to the component instance.
this.setState({showOptionsModal: true});
render: function(){
&TouchableHighlight onPress={this.handleOptionsButtonClick}&
&Text&{this.props.label}&/Text&
&/TouchableHighlight&
在ES5下，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。
在ES6下，你需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用
class PostInfo ponent
handleOptionsButtonClick(e){
this.setState({showOptionsModal: true});
&TouchableHighlight
onPress={this.handleOptionsButtonClick.bind(this)}
onPress={e=&this.handleOptionsButtonClick(e)}
&Text&{this.props.label}&/Text&
&/TouchableHighlight&
箭头函数实际上是在这里定义了一个临时的函数，箭头函数的箭头=&之前是一个空括号、单个的参数名、或用括号括起的多个参数名，而箭头之后可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过return来返回值，否则返回的是undefined）。
// 箭头函数的例子
(a,b)=&a+b
alert("foo");
if (e == 0){
return 1000/e;
需要注意的是，不论是bind还是箭头函数，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用
// 错误的做法
class PauseMenu ponent{
componentWillMount(){
AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
componentDidUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
onAppPaused(event){
// 正确的做法
class PauseMenu ponent{
constructor(props){
super(props);
this._onAppPaused = this.onAppPaused.bind(this);
componentWillMount(){
AppStateIOS.addEventListener('change', this._onAppPaused);
componentDidUnmount(){
AppStateIOS.removeEventListener('change', this._onAppPaused);
onAppPaused(event){
从网上我们还学习到一种新的做法：
// 正确的做法
class PauseMenu ponent{
componentWillMount(){
AppStateIOS.addEventListener('change', this.onAppPaused);
componentDidUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused);
onAppPaused = (event) =& {
//把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
在ES5下，我们经常使用mixin来为我们的类添加一些新的方法，譬如PureRenderMixin
var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
mixins: [PureRenderMixin],
render: function() {
return &div className={this.props.className}&foo&/div&;
然而现在官方已经不再打算在ES6里继续推行Mixin，他们说：。
尽管如果要继续使用mixin，还是有一些第三方的方案可以用，譬如
不过官方推荐，对于库编写者而言，应当尽快放弃Mixin的编写方式，上文中提到Sebastian Markb&ge的一段代码推荐了一种新的编码方式：
//Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent =& class extends Component {
constructor() {
this.state = { data: null };
componentDidMount() {
this.setState({ data: 'Hello' });
render() {
return &ComposedComponent {...this.props} data={this.state.data} /&;
//HigherOrderComponent.js
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!this.data) return &div&Waiting...&/div&;
return &div&{this.data}&/div&;
export default Enhance(MyComponent); // Enhanced component
用一个“增强函数”，来某个类增加一些方法，并且返回一个新类，这无疑能实现mixin所实现的大部分需求。
ES6+带来的其它好处
解构&属性延展
结合使用ES6+的解构和属性延展，我们给孩子传递一批属性更为方便了。这个例子把className以外的所有属性传递给div标签：
class AutoloadingPostsGrid ponent {
render() {
className,
...others, // contains all properties of this.props except for className
&div className={className}&
&PostsGrid {...others} /&
&button onClick={this.handleLoadMoreClick}&Load more&/button&
下面这种写法，则是传递所有属性的同时，用覆盖新的className值：
&div {...this.props} className="override"&
这个例子则相反，如果属性中没有包含className，则提供默认的值，而如果属性中已经包含了，则使用属性中的值
&div className="base" {...this.props}&
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具3974人阅读
react（44）
this.props.children
this.props&对象的属性与组件的属性一一对应，但是有一个例外，就是&this.props.children&属性。它表示组件的所有子节点（查看&）。
var NotesList = React.createClass({
render: function() {
React.Children.map(this.props.children, function (child) {
return &li&{child}&/li&;
ReactDOM.render(
&NotesList&
&span&hello&/span&
&span&world&/span&
&/NotesList&,
document.body
上面代码的&NoteList&组件有两个&span&子节点，它们都可以通过&this.props.children&读取，运行结果如下。
这里需要注意，&this.props.children&的&#20540;有三种可能：如果当前组件没有子节点，它就是&undefined&;如果有一个子节点，数据类型是&object&；如果有多个子节点，数据类型就是&array&。所以，处理&this.props.children的时候要小心。
React 提供一个工具方法&&来处理&this.props.children&。我们可以用&React.Children.map&来遍历子节点，而不用担心&this.props.children&的数据类型是&undefined&还是&object。更多的&React.Children&的方法，请参考。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：46090次
排名：千里之外
原创：46篇
转载：41篇
(2)(11)(4)(1)(57)(10)(1)