2. 程式人生 > >React + TypeScript 預設 Props 的處理

React + TypeScript 預設 Props 的處理

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

React 中的預設 Props

通過元件的 defaultProps 屬性可為其 Props 指定預設值。

以下示例來自 React 官方文件 - Default Prop Values：

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

如果編譯過程使用了 Babel 的 transform-class-properties 外掛，還可以這麼寫：

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

加入 TypeScript

加入 TypeScript 後

interface Props {
  name?: string;
}

class Greeting extends React.Component<Props, {}> {
  static defaultProps = {
    name: "stranger",
  };

  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

此時不支援直接通過類訪問 defaultProps 來賦值以設定預設屬性，因為 React.Component 型別上並沒有該屬性。

//    
 
  
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
React + TypeScript 預設 Props 的處理

     
 
  
    
      
React 中的預設 Props
通過元件的 defaultProps 屬性可為其 Props 指定預設值。
以下示例來自 React 官方文件 - Default Prop Values：
class Greeting extends React.Component {
   



  
 

    


    
    
react設定預設props

     
 
								
								            
							
							
							一般設定props的預設值有兩種方式，下面通過一個例子說明一下。



<!DOCTYPE html>
<html>
  <head>
    <meta ch 



  
 

    


    
    
React Native的props使用詳解

     
 static   rip   ng-   ont   nts   -m   https   oot   ner   普通傳參

傳遞
export default class App extends Component<> {

    constructor() {
        super( 



  
 

    


    
    
react-native WebView 返回處理 （非回調方法可解決）

     
 外部   log   finish   既然   node   div   hang   rec   代碼段   1.前言 
項目中有些頁面內容是變更比較頻繁的，這些頁面我們會考慮用網頁來解決。
在RN項目中提供一個公用的Web頁，如果是網頁內容，就跳轉到這個界面展示。
此時會有一個問題是，網頁會有一級頁面， 



  
 

    


    
    
react 生命中期   props  state區別  生命周期

     
 eat   class   ini   destroy   安裝   ops   art   渲染   之前   npm安裝create-react-app
npx create-react-app my-app

cd my-app
npm start
 
查看調試props驗證  babel-react- 



  
 

    


    
    
使用react——解決this.props.history.push無法跳轉的問題

     
 轉自： 
https://blog.csdn.net/yingzizizizizizzz/article/details/78751305 
場景： 
一個元件中，含有ul展開陣列的元件，在每一行中，都能點選相應的這一行，跳轉到對應的頁面。 
也就是說，元件套元件，子元件中this.props.history 



  
 

    


    
    
React中constructor(props){}究竟是什麼

     
  
 
 在React Class中設定state的初始值或者繫結事件時 
 為什麼需要在 constructor(){} 中加上 super() 呢 
 我們嘗試去掉 super() 看看編譯的結果： 
 
  
 
   constructor() {  
   this.state = {se 



  
 

    


    
    
React中的事件處理為什麼要bind this?

     
 這個回答非常清晰，轉載自知乎-dmumatt: 
  
  
 
  
  程式碼一： 
   
   // 使用 ES6 的 class 語法
class Cat {
 sayThis () {
 console.log(this); // 這裡的 `this` 指向誰？
  }

 e 



  
 

    


    
    
亂七八糟的積累-React+typescript

     
  
  
  
 1、React.Fragment的使用 
 renderCompontent = () => {
    return (
      <div>
        <Compontent1/>
        <Compontent2/>
      



  
 

    


    
    
react+typescript實踐總結

     
  
  
  
 typescript語法參考  react參考 
 1、給繫結在dom上的方法傳參 
 1.1定義 
 getDetailByBookId = (id: string) => {
  console.log(id)
} 
 1.2呼叫 
 <a data-id={book._id 



  
 

    


    
    
React中---"props" 及 父元件如何向子元件傳值(元件通訊-父傳子)

     
  
 
  
  以下關於React的props屬性的內容介紹都是我個人理解： 
  在react當中，我們常說的單向資料流值的說法，其實說的就是props屬性，最常見的props用法就是元件之間的通訊---父元件向子元件傳值。 
  並且，props本身是不可逆的，具有隻讀性，也就是說它不能修改自己本身，傳 



  
 

    


    
    
雲風的 BLOG: sproto 的預設值處理

     
 
                              sproto 由於主要供 lua 使用，是不能在協議定義中描述預設值的。所有不編碼的欄位都呈現為 lua 中的 nil 。

注：這裡還有個實現上的小問題。如果一個數組為空，也會呈現為 nil 而不是空表，所以應當注意處理。

我最近給 sprot 



  
 

    


    
    
【React系列】Props 驗證

     
  
  
  
 
  Props 驗證使用 propTypes，它可以保證我們的應用元件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入資料是否有效。當向 props 傳入無效資料時，JavaScript 控制檯會丟擲警告。
  
 常見的驗證器： 
 
    



  
 

    


    
    
webpack4+react+typescript搭建demo

     
 
                最近寫了個用react+webpack+typescript搭建的demo

目錄結構如下：



package.json:

{
  "name": "react-webpack-cms",
  "version": "1.0.0",
  "description": " 



  
 

    


    
    
react-pdf-js前端處理PDF的一種方式

     
  
 
  
  
 
 
  react-pdf-js前端處理PDF的一種方式
 
  
 import React from 'react';
import PDF from 'react-pdf-js';

class MyPdfViewer extends React.Component {
  st 



  
 

    


    
    
React TypeScript使用總結

     
  
 
 
 
  TypeScript 是 JS 型別的超集，並支援了泛型、型別、名稱空間、列舉等特性，彌補了 JS 在大型應用開發中的不足，那麼當 TypeScript 與 React 一起使用會碰撞出怎樣的火花呢？接下來讓我們一起探索在 TypeScript2.8+ 版本中編寫 React 元件的姿勢。 



  
 

    


    
    
為什麽用React.Children.map(props.children, () => )而不是props.children.map(() => )

     
 array   數組   class   就是   使用   映射   內部   gitbook   這就是   不能保證props.children將是一個數組。
以此代碼為例，

<Parent>
  <h1>Welcome.</h1>
</Parent>
 



  
 

    


    
    
react-native開發異常處理——react-native run-android命令報錯

     
 
								
								            
						
                react-native學習交流QQ群：806870562在終端使用命令react-native run-android報錯，如下圖所示：其中說到No connected devices!，我便猜測是不 



  
 

    


    
    
react native -- this.props.children

     
 
                

this.props.children 

指的是傳入到元件的孩子個數

如Test元件

<Test>

　　<View><Text>1</Text></View>

　　<Text>2</T 



  
 

    


    
    
Java基礎學習總結---------異常Exception(3) -JVM預設如何處理異常

     
 
								
								            
						
                
異常Exception
注：本人學習的是傳智播客風清揚老師的java基礎視訊，劉老師講的特別詳細，本人只是把部落格當作學習筆記。

<span style="font-size:18px;"&g