react组件传值

最新推荐文章于 2024-06-24 14:07:47 发布
ouyangchaoqun
最新推荐文章于 2024-06-24 14:07:47 发布
阅读量627
点赞数
分类专栏：前端框架文章标签： react
前端框架专栏收录该内容
10 篇文章 0 订阅
订阅专栏

**父组件向子组件传值**
-------------
<div id = "out"></div> 

<script type="text/babel">

    var Chd = React.createClass({   //创建子组件
        render:function(){
            var pri = this.props.name;
            if(pri>=88){
                pri = this.props.name;
            }else{
                pri = this.props.name+10;
            }
            console.log(this.props);
            return(
                <div>
                    <h1>子组件</h1>
                    <div>{pri}</div>
                </div>
            )
        }
    });
    var Par = react.createClass({  //创建父组件
        getInitialState:function(){  //设置默认状态值
            return{
                res0:"",
                res1:""
            }
        },
        tap:function(e){
            console.log(e.target.value);
            var str = e.target.value;
            this.setState({
                res0:str,
            })
        },
        tap1:function(e){
            console.log(e.target.value);
            var str = e.target.value;
            this.setState({
                res1:str
            })
        },
        render:function(){
            console.log(this.props);
            return(
                <div>
                    <h1>父组件</h1>
                    数量<input type="text" onChange = {this.tap1}/>
                    <br/>
                    单价<input type = "text" onChange = {this.tap}/>
                    <Chd name = {this.state.res0*this.state.res1}/>
                </div>
            )
        }
    });

    ReactDOM.render(<Par/>,document.getElementById("out"));
</script>


----------


子组件向父组件传值
<body>
<div id = "out">

</div>
<script type = "text/babel">
    var Demo = React.createClass({
        getInitialState:function(){
            return{
                res:""
            }
        },
        render:function(){
            var _this = this
            return(
                <div>
                    <div>{_this.state.res}</div>
                    <h1>父组件</h1>
                    <Chi ty = {function(s){_this.setState({res:s});}}/>
                </div>
            )
        }
    });

    var Chi = React.createClass({
        tap:function(){
            console.log(this.refs.sre.value);
            var str = this.refs.sre.value;
            this.props.ty(str);
        },
        render:function(){
            return(
                <div>
                    <h1>子组件</h1>
                    <input type = "text" ref = "sre" onChange = {this.tap}/>
                </div>
            )
        }
    });
    ReactDOM.render(<Demo/>,document.getElementById("out"));
</script>
</body>
点击按钮隐藏密码
<body>
    <div id = "out"></div>
</body>
<script type = "text/babel"> 
    var Demo = React.createClass({
        getDefaultProps:function(){
            return{
                url:"good.json"
            }
        },
        getInitialState:function(){
            return{
                res:"password",
                res1:"明文",
                res2:[]
            }
        },
        componentWillMount:function(){
            var _this = this;
            $.get(_this.props.url,function(data){
                console.log(data);
                _this.setState({
                    res2:data
                });
                console.log(_this.state.res2)
            })
        },
        tap:function(){
            if(this.state.res == "password"){
                this.setState({
                    res:"text",
                    res1:"密文"
            })
            }else{
                this.setState({
                    res:"password",
                    res1:"明文"
                })
            }

        },
        render:function(){
            return(
                <div>
                    <input type = {this.state.res} />
                    <button onClick = {this.tap} ref = "a">{this.state.res1}</button>
                {console.log(this.state.res2)}
                {this.state.res2.map(function(item){
                    return <div><p>{item.name}</p><p>{item.gid}</p><p>{item.gprice}</p></div>
                    })
                }
                </div>
            )
        }
    });
    ReactDOM.render(<Demo/>,document.getElementById("out"));
</script>
取值方式
var Demo = React.createClass({
    render:function(){
        var sty={width:'500px',height:'200px',border:'1px solid red',margin:'0 auto'}
        console.log(this.props)
    return(
        <div>
            <h1>属性字符串:{this.props.name}</h1>
            <h1>属性数组:{this.props.aa[2]}</h1>
            <div style={sty}>{this.props.bb.age}<br/>{this.props.bb.age1}<br/>{this.props.bb.age2}</div>
            <h2>组合数据数组:{this.props.cc[1][0]}{this.props.cc[2].age}</h2>
            <h2>组合数据对象:{this.props.dd.name2.age} <br/> {this.props.dd.name3[0]}</h2>
        </div>
    )
}
})


var str="hello react";
var arr=['你好',2222,'hi'];
var obj={
age:'白雪公主',
age1:'七个小矮人',
age2:'毒苹果'  
}


var arrx=[
'hello react',
['你好',2222,'hi'],
{
age:'白雪公主',
age1:'七个小矮人',
age2:'毒苹果'  
}
]
var arry = {
name:'hello react',
name2:{
age:'白雪公主',
age1:'七个小矮人',
age2:'毒苹果'
},
name3:['你好',2222,'hi']

}