React遍历组件元素的子元素

// 创建组件

var NewDom = React.createClass({ // 类名一定要大写开头
    render: function () {
        return (
            <ol>
                {
                    React.Children.map(this.props.children, function (child) {
                        // 获得元素的子元素
                        console.info(child);
                        return (<li>{child}</li>);
                    })
                }
            </ol>
        )
    }
});

ReactDOM.render(
    <NewDom>
        <span>123</span>
        <span>456</span>
    </NewDom>,
    document.getElementById(‘example‘)
);

ES6的写法:

class NewDom extends React.Component {
    render() { // 开头花括号一定要和小括号隔一个空格,否则识别不出来
        // 标签开头一定要和return一行
        return <ol>
            {
                React.Children.map(this.props.children, function (child) {
                    return <li>{child}</li>
                })
            }
        </ol>;
    }
}

ReactDOM.render(
    <NewDom>
        <span>123</span>
        <span>456</span>
    </NewDom>,
    document.getElementById(‘example‘)
);

React组件的属性props

var NewDom = React.createClass({ // 类名一定要大写
    getDefaultProps: function () { // 设置默认属性
        return {title: ‘123‘};
    },
    propTypes: {
        title: React.PropTypes.string
    },
    render: function () {
        return (<div>{this.props.title}</div>); // 变量用花括号标识
    }
});

ReactDOM.render(
    <NewDom />,
    document.getElementById(‘example‘)
);

ES6

class NewDom extends React.Component {
    // 不能在组件定义的时候定义一个属性
    render() {
        return (<div>1 {this.props.title}</div>)
    }
}

NewDom.propTypes = {
    title: React.PropTypes.bool
};

NewDom.defaultProps = {title: ‘123‘}; // 设置默认属性

ReactDOM.render(
    <NewDom/>,
    document.getElementById(‘example‘)
);
时间: 2024-10-12 17:45:32

React遍历组件元素的子元素的相关文章

jquery选择器:获取父级元素、同级元素、子元素

jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获取父级元素.同级元素.子元素的方法. 一.获取父级元素1.parent()获取指定元素的父级元素,注意:是最靠近指定元素的父级元素. 2.parents()获取指定元素的所有父级元素,注意:是所有的父级元素,包括body,html 二.获取同级元素1.next()获取指定元素的下一个同级元素(注意:

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l

判断一个元素是否是另一个元素的子元素或者父元素

判断一个元素是否是另一个元素的子元素或者父元素:在实际应用中有时候会判断某个元素是另一个元素的子元素或者父元素,下面就通过代码实例介绍一下. //判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf=function(b){ return (this.parents(b).length>0); }; //判断:当前元素是否是被筛选元素的子元素或者本身 jQuery.fn.isChildAndSelfOf=function(b){ return (this.closest

jQuery中兄弟元素、子元素和父元素的获取

我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行获取和操作. jQuery提供的方法 上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点

父元素与子元素之间的margin-top问题(css hack)(转载)

情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声明浮动(float:left:可用) 4.为父元素添加border(border:1px solid transparent可

关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题: html: 1 <div class="top"> 2 <div class="one">I'm the first!</div> 3 <div class="two">I'm the second!</div> 4 </div> css: .one{ width: 100px; height: 100px; background: red;

[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹

此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素 html HTML标记代码字符串,用于动态生成元素并包装目标元素 element 用于包装目标元素的DOM元素 fn 生成包裹结构的一个函数 实例: <html lang='zh-cn'> &l

在Js中得到元素的子元素集合注意事项

http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 <ul>2  <li>this's one</li>3  <li>this's two</li>4  <li>this's three</li>5  <li>this's four</li>6 <ul