React 属性和状态详解
属性的含义和用法props=properties <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一,关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel"> var HelloWorld = React.createClass({ render: 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}/> </div> ) } }); ReactDOM.render(<HelloUniverse></HelloUniverse>,document.querySelector("#example")); </script>
运行结果如下,使用的是键值对的方式 第二种方法:可以理解为展开 <body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel"> var HelloWorld = React.createClass({ render: function () { return <p>Hello,{this.props.name + " " + this.props.age}</p>; } }); var HelloUniverse = React.createClass({ getInitialState: function () { return {name: "Yvette",age: "25"}; },render: function () { return( <div> <HelloWorld {...this.state}></HelloWorld> <input type = "text" onChange = {this.handleChange}/> </div> ) } }); ReactDOM.render(<HelloUniverse></HelloUniverse>,document.querySelector("#example")); </script>
运行结果如下,使用{…this.state}展开 第三种方法:调用react提供的setProps函数 <body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel"> var HelloWorld = React.createClass({ render: function(){ return <p>Hello,{this.props.name}</p> } }); var instance = ReactDOM.render(<HelloWorld></HelloWorld>,document.querySelector("#example")); instance.setProps({name: "William"}); </script>
使用setProps修改属性值,此种方式不推荐,如果需要改变属性值,可以参考第一个例子,利用父组件去修改。 状态的含义和用法state 属性和状态的对比属性和状态的相似点 组件在运行时需要修改的数据就是状态。 属性和状态的实例编写一个简单的文章评论框 1、select,option是写死的 利用属性和状态实现一个评论框: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一,关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title>评论框</title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<!--将option提取出来作为父组件的状态-->
<!--将评论对象(selectName)传递给子组件-->
<!--修改子组件,构建回复内容-->
<!--监听内容的变化,并将变化记录在状态中-->
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel"> var style = { width:300 + 'px',height:150 + 'px',marginTop:20+'px',marginBottom:20+'px',resize: 'none',textIndent:10 + 'px' }; var Content = React.createClass({ getInitialState: function (){ return{ inputText: "" }; },handleChange: function(event){ this.setState({inputText:event.target.value}) },handleSubmit: function () { console.log("reply to: " + this.props.selectName + "n" + this.state.inputText); },render: function () { return (<div> <textarea style = {style} onChange = {this.handleChange} placeholder = "please enter something..." ></textarea> <br/> <button onClick = {this.handleSubmit}>submit</button> </div>); } }); var Comment = React.createClass({ getInitialState: function () { return{ names: ["William","Yvette","Katharine"],selectName: "" }; },handleChange: function (event) { this.setState({selectName:event.target.value}) },render: function () { var options = []; for(var option in this.state.names){ options.push(<option value = {this.state.names[option]}> {this.state.names[option]} </option>) }; return ( <div> <select onChange = {this.handleChange}> {options} </select> <Content selectName = {this.state.selectName}></Content> </div>); } }); ReactDOM.render(<Comment></Comment>,document.querySelector("#example")); </script>
需要注意的是,React中,style不能直接写300px,需要使用拼接,另外margin-top等也需要使用驼峰命名法,写成marginTop (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |