react元件三大屬性之state

阿新 • • 發佈：2019-01-24

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_state</title>
</head>
<body>

<div id="example"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src 
="../js/babel.min.js"></script>
<script type="text/babel">
  class App extends React.Component{

      constructor(props){
          super();
          //初始化狀態
          this.state = {
              isAlive:false
          };
          this.myclick = this.myclick.bind(this);
      }
      myclick 
(){//通過修改狀態 點選時候 切換 我打你 你打我
         // 修改狀態(重寫渲染)
        this.setState({
            isAlive : !this.state.isAlive
        });
      }
      render () {
          /*let isAlive = this.state.isAlive;與下面語句同等*/
          let {isAlive} = this.state;

          let msg = isAlive ? '我打你' : '你打我';
          return 
 (
                 <h1 onClick={this.myclick}>{msg}</h1>
          )
      }
  }
  ReactDOM.render(<App />,document.getElementById("example"));
</script>
</body>
</html>

效果
在這裡插入圖片描述

react元件三大屬性之state

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_comp

React系列--三大屬性 props refs state

一個 this 傳值實的值傳遞取值 gin 對象組件 https://blog.csdn.net/ImagineCode/article/details/82429819 props:組件外部向組件內部傳值用，標簽屬性都掛載在 props上，　　<AddTo

JAVA——三大屬性之繼承

什麼是繼承？類與類的一種關係，跟 "is a"一樣的關係 JAVA中類只能繼承一個類，是單繼承的關係,就像一個孩子只能有一個親爸繼承的好處：子類將擁有父類的所有屬性和方法，實現程式碼的複用。 //定義一個Phone的父類，簡單的設定幾個變數 public class Phone

react 初探：react元件和屬性

react 的設計方式採用了元件化的方式，將UI 分割成一個個元件便於更好的實現和重複利用。元件分為函式式元件和類元件，函式式元件主要用來做為頁面渲染使用（僅僅作為頁面渲染，不附帶其他初始化功能）函式式元件 function Welcome(props) {

React元件之Clock

這個例子是React官方文件裡面的，程式碼也在CodePen，例子非常簡單，展示了React元件開發的基本過程，這裡將這個例子進行分析記錄，當做學習筆記吧！首先看程式碼： //HTML <div id="root"> <!-- Thi

React手稿之State Hooks of Hooks

React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。官方也陳述，接下來的90%的工作會投入到React Hooks中。從目前官方的文件可以看出，Hooks從以下四個方面來提高React的編碼。 state 生命週期

React-Native 動態屬性state

如果是需要涉及到動態變化，就需要使用state這個屬性了示例如下： import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-nat

【REACT NATIVE 系列教程之四】重新整理元件RENDER(重新渲染)的三種方式詳解

開發過遊戲的都應該很清楚，“刷屏”是多麼的重要。其實開發應用也如此，當元件的資料被修改後，如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式：this.setState() 【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt

React基礎篇-元件；props；state

1.定義元件 //方法一：類似於建構函式的方式 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } //方法二：ES6中類的方式 class W

PB控制元件屬性之Graph

Graph圖形控制元件【其他】 ■軸型別軸--Category--String型、數值型、Date型、Datetime型和Time型值軸--Value--數值型、Date型、Datatime型和Time型系列軸--Series--String型 ■圖形外觀Powe

react-native 之 state 和 props 以及 redux 和 react-redux

Component 中 state 和 props 的區別；元件Component中狀態state和屬性props的區別 state props state是在元件內部定義的一個特殊物件{}，既起到元件內部的一種快取作用，也具備由於

vuex狀態管理模式之state屬性

一、Vuex是什麼？ vuex是用來專門管理vue元件中的共享資料的狀態管理模式。那vuex中狀態又是什麼東東呢？我們在學習vuex時，我們先來回顧一下vuejs元件之間的資料通訊有哪幾種： 1、父元件向子元件發出通訊通過props關鍵字，也就是父

React-Native填坑之TextInput value屬性

TextInput用法就不多講了，主要記錄下遇到的一個怪問題。背景：專案需要開發一個充值頁面，需要一個輸入框，然後幾個按鈕，輸入框是允許使用者自己輸入任意金額，按鈕是可以讓使用者快捷選擇

react demo8 (設定元件自身屬性this.props.children)

需求：定義一個列表元件，列表項中顯示的內容，以及列表項的數量都由外部決定學習：設定元件自身屬性this.props.children <!doctype html> <html

React Native學習筆記之--元件之間資料的傳遞和跳轉

React Native學習筆記之–元件之間資料的傳遞和跳轉自定義屬性的定義方式和傳遞假定元件ComponentA中的自定義屬性為 static props = { tit

React PropTypes 定義元件的屬性型別和預設屬性

新增:在React 16版本之後, PropTypes 從react包換到了prop-types 包中,所以想要使用PropTypes 需要這樣:yarn add prop-types在需要引入的地方

React元件屬性部類（propTypes）校驗

PropTypes提供了多種驗證器 1、JavaScript基礎資料型別，包括陣列、布林、函式、數字、物件、字串 optionalArray: React.PropTypes.array, opt

【REACT NATIVE 系列教程之十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式

補充說明：一：很多童鞋問，鍵盤調出來被擋住了，那麼下面給出三個解決方案：1. 在render最外層包一個ScrollView，然後當鍵盤調出時，scrollTo即可實現。2. 在底部新增一個可變化高度的view，根據鍵盤獲取、失去焦點時，進行處理實現二：有的童鞋說對話方塊的背景沒有根據內容長短自適應，OK ，

手把手教你使用Vue/React/Angular三大框架開發Pagination分頁元件

DevUI是一支兼具設計視角和工程視角的團隊，服務於華為雲DevCloud平臺和華為內部數箇中後臺系統，服務於設計師和前端工程師。官方網站：devui.designNg元件庫：ng-devui（歡迎Star）引言 “他在正午、黃昏，在一天裡的許多時刻去感受它、記錄它，

React Native環境配置之Windows版本搭建

services 就會 wrapper function 新建項目之前 path ont 系統接近年底了，回想這一年都做了啥，學習了啥，然後突然發現，這一年買了不少書，看是看了，就沒有完整看完的。悲催。然後，最近項目也不是很緊了，所以抽空學習了H5。自學啃書還是很無趣的

react元件三大屬性之state

相關推薦