react 的props和state

props

　　当前组件的组件标签身上的所有属性和子节点构成的集合；

　　可以用来组件传递数据，一般用于父子组件之间；

　　this.props对象的属性与组件的属性一一对应，但对于组件标签的子节点，this.props.children属性的值有三种可能：
　　　　　　1、如果当前组件没有子节点，为underfined；
　　　　　　2、如果有一个子节点，类型为object；
　　　　　　3、如果是多个子节点，就为array。
react提供一个工具方法，React.Chilren来处理this.props.children。可以用React.Chilren.map来遍历所有子节点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/react.js"></script><script src="js/react-dom.js"></script><script src="js/browser.min.js"></script></head><body><div id="app"></div></body>
</html>
<script type="text/babel">let Hello = React.createClass({render(){return(<div>{React.Children.map(this.props.children,function(value,index){return <p>{value}</p>
                    　　})}</div>
            )}})ReactDOM.render(<Hello><span>hello</span></Hello>,
        document.getElementById("app"))
</script>

state和props一样。props是一个静态值，一旦设定了就不需要改变，一般用于设定请求的网络地址。

state是状态值，可以通过this.setState方法修改状态值，每次修改后，自动调用this.render方法，再次渲染组件。

getInitialState()方法用于定义初始状态。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/react.js"></script><script src="js/react-dom.js"></script><script src="js/browser.min.js"></script></head><body><div id="app"></div></body>
</html>
<script type="text/babel">let Hello = React.createClass({getInitialState(){     /*初始化状态值*/return{content:"hello"}},update(){this.setState({            /*修改状态值*/content:"Hello World"})},render(){return(<div><p>{this.state.content}</p><button onClick={this.update}>点击修改</button></div>
            )}});ReactDOM.render(<Hello/>,
        document.getElementById("app"))
</script>

转载于:https://www.cnblogs.com/guiyh/p/9393447.html

react 的props和state相关推荐

React中props与state的区别
首先,props与state是React组件的两种方法. props,可以在组件中来获取this.props的属性. var Helloreact=React.createClass({render: ...
前端学习（2307）：react之props和state
Home,js import React, {Component} from 'react'; import News from "./News"; class Home exte ...
React 深入系列３：Props 和 State
文:徐超,<React进阶之路>作者授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
从 0 到 1 实现 React 系列 —— 组件和 state|props
阅读源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...) 组件即函数在上一篇 JSX 和 Vir ...
【React】React三大属性：Props、State、Refs
文章目录 Props State Ref Props React框架定义了一个Props的概念, 专门用来实现React组件接受参数的输入. 每个组件对象都会有props(properties的简写) ...
React基础——组件状态state、属性props
import React from 'react'; // 此句不能少 import ReactDom from 'react-dom';class Taggle extends React.Comp ...
React学习：状态(State) 和属性(Props)
React :元素构成组件,组件又构成应用. React核心思想是组件化,其中组件通过属性(props) 和状态(state)传递数据. State 与 Props 区别 props 是组件对外 ...
ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...

react 的props和state

react 的props和state相关推荐

最新文章

热门文章