Why do react components define a default state

problem description

I"d like to ask you why the react component defines defaultProps,displayName,. If it"s not defined, what"s wrong with it?

the environmental background of the problems and what methods you have tried

tried it and found that there would be no problem

related codes

/ / Please paste the code text below (do not replace the code with pictures)

Component.displayName = "CreateUser";

Component.defaultProps = {
className: "createUser",
};

what result do you expect? What is the error message actually seen?

I hope you can help answer

React.js

Jul.06,2021

DefaultProps in

React is not the default state, it is the default property. Write a simple example:

class Title extends React.Component{
  render(){
    const { title, color } = this.props;
    return(
      <div>
        <h3 style={{ color: color }}>
          {title}
        </h3>
      </div>
    );
  };
};
Title.defaultProps = {
  color: '-sharp666',
  title: '',
};

ReactDOM.render(
  <Title />,
  document.getElementById('root')
);

The function of the default property is to have a default value when you call the component without passing in the corresponding property value. It is not defined and will not report an error, but it is best to pass in all the required property values when calling the component, otherwise an error may occur.

I'm just here to add.

because the new version of babel supports transform-class-properties to convert, the syntax will be changed to add static to define it. Here is the sample code of the official document:

  https://reactjs.org/docs/type.


										
												Previous: How does this happen to objects in Node.js?
												                		Next: Mini Program's sharing page cannot make a data request.
                							
					
						
					
															
						
														
								React uses axios to call the background data. After success, how to jump to the page based on the returned value?
								
 1. Write the landing page with react, after calling the background data with axios, judge the route of the page to jump according to the return value, how to jump?  2.axios.get (    login login.action?username=  +name+  &password=  +pd, {)
timeout: 1000...
								
									
																														React.js
																				axios
																			
									
										Feb.26,2021
									
								
							
														
								Can an array in react state be bound to a dom state using an element in the array?
								
 setting in state: this.state = {checkList: []}; 
 checkList initializes it with an array of the same length as JsonPage: this.setState ({checkList:checkSaveCount});     checkSavaCount is the same length as the following JsonPage. 
 the following creates...
								
									
																														Create-react-app
																				antdesign
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								React Project Cannot add property style, object is not extensible
								
import React from   react  ;


class PublicScreen extends React.Component {
    constructor(props) {
        super(props);

        this.getStyle = this.getStyle.bind(this);
    }


    getStyle() {
        const { width = 1920, height = 1080 } = this.pr...
								
									
																														React.js
																				es6
																			
									
										Feb.26,2021
									
								
							
														
								How to put the component from const into return?
								
 
renderdphtmldvareturnapiBackend:
apiBackend

 
...
								
									
																														Dva.js
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								React projects cannot save store? using redux, data
								
 react projects cannot save store? using redux, data 
 index.js 
ReactDOM.render(
  <Provider store={store}>
    <Router  >
  < Provider>, document.getElementById(  root  ))
registerServiceWorker()

 actions 

export const SET_USER =   ...
								
									
																														Javascript
																				react.js
																				redux
																			
									
										Feb.26,2021
									
								
							
														
								In learning react, I encountered the function super.
								
 this method is included in the constructor of most components, so what exactly is this method for 
  constructor(props,context){
      super(props,context)
  }
...
								
									
																														React.js
																				html5
																			
									
										Feb.26,2021
									
								
							
														
								How to cancel the page change or refresh of react Antd Design table checkbox
								 use the Table component of Antd Design, first check out the data, and then select a CheckBox, but when you change pages, that CheckBox will not disappear. For example, when I select the first line on the first page, and then skip to the second page, the ...
								
									
																														Antdesign
																				react.js
																				javascript
																			
									
										Feb.26,2021
									
								
							
														
								There is a problem with the operation of React after packaging.
								
  I can run before packaging without any error reports. This problem occurs after packaging.  reports such an error in the browser, using scaffolding made by create-react-app, and the back end is Node.js, backend. No error is reported:  packages two diff...
								
									
																														Node.js
																				react.js
																				express
																				javascript
																			
									
										Feb.26,2021
									
								
							
														
								My websocket can only accept data on newly opened pages.
								
 segmentfault
dvaws.open().websocketwebsocketws
ws.openfetchGETloginsendfetchCOOKIECOOKIEFETCHCOOKIECOOKIE 
...
								
									
																														Websocket
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								How to get the name of input by embedding input in ant design table
								  ...
								
									
																														Antdesign
																				antd
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								How to generate dom recursively from json by react.createElement
								
 now we need to develop a website to generate front-end pages based on the node ID saved in the database. For example, the json data is: 
let data=[
    {"id":1,"pid":0,"type":"div"},
    {"id":2,"pi...
								
									
																														Createelement
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								React two unrelated components how does component 2 change when component 1 changes a state
								
 I pass values through redux 
 scenario is when I click on the navigation bar of component 1 and refresh the ajax of component 2 
 is the data returned by ajax accepted by this.state.contnet 
 what should I write? There is an urgent need for ideas. 
...
								
									
																														Redux
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								React Daily questions the use of, antd select components
								
 official example of full copy:  this is the official sample code: 
import { Select } from   antd  ;
const Option = Select.Option;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <div>
    <Select defaul...
								
									
																														Antdesign
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								How does react change the value of input
								
  how to use react to change the value of Input  
< hr >
export default class myForm extends Component{

    constructor(props){
        super(props);
        this.state = {
            id:     ,
        };
    }
    
    change=()=>{
        var idIn...
								
									
																														Javascript
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								What if you want to make the project adaptive in the react project?
								
 want to set the meta tag to solve the adaptive problem 
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 

 meta  LOGO  

 
...
								
									
																														Html
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								The option of select cannot be rendered by callback.
								
 use list as the option data source for Select, but use callback, which cannot be rendered. Just call it directly, as shown in the figure below. The first method is fine, and the second is not. Because there are many Select, on a page, you need to use th...
								
									
																														React.js
																				antdesign
																			
									
										Feb.26,2021
									
								
							
														
								Webpack package react, error its MIME type ('text/html') is not executable
								
< H1 >  github address  <   H1 >
 error will be reported when using npm run dev 
const path = require(  path  );
const merge = require(  webpack-merge  );
const common = require(  . webpack.common.js  );
   dev-server
let BundleAnalyzerPlugin = require( ...
								
									
																														React.js
																				webpack
																			
									
										Feb.26,2021
									
								
							
														
								In the React project, a piece of code is optimized.
								import React from   react  ;
import ReactDOM from   react-dom  ;
import   . assets styles index.less  ;

import Green from   . assets images green.png  ;
import Red from   . assets images red.png  ;

class Circle extends React.Component {

    constructor...
								
									
																														Es6
																				react.js
																			
									
										Feb.26,2021
									
								
							
														
								A little doubt about reading the official documents of React
								
There are two areas in the  State and Lifecycle section that I don  t quite understand 
 1.  State Updates are Merged 

 The merging is shallow, so this.setState ({comments}) leaves this.state.posts intact, but completely replaces this.state.comments. 
 ...
								
									
																														React.js
																				javascript
																			
									
										Feb.26,2021
									
								
							
														
								The elements in an array are all arrays. How do you merge all the elements in an array into one array?
								
 like this   [array [xxx], array [xxx], array [xxx].]  
 merge all  xxx  in  array  into one array  [xxx.]  
...
								
									
																														Node.js
																				react.js
																				vue.js
																				javascript
																			
									
										Feb.26,2021


				
					
						
	
						
		css
		mysql
		arrays
		josn
		react
		html
		typescript
		webpack
		npm
		sass
		R
		objective-c
		.net
		sql-server
		jquery
		python-3.x
		angularjs
		django
		angular
		excel
		regex
		iphone
		ajax
		linux
		xml
		pandas
		vba
		spring
		database
		wordpress
		string
		wpf
		xcode
		windows
		bash
		postgresql
		oracle
		multithreading
		eclipse
		list
		firebase
		algorithm
		macos
		forms
		image
		scala
		visual-studio
		azure
		bootstrap
		spring-boot
		react-native
		python-2.7
		docker
		performance
		function
		winforms
		matlab
		powershell
		apache
		dataframe
		api
		sqlite
		numpy
		rest
		shell
		selenium
		flutter
		dart
		maven
		loops
		qt
		swing
		android-studio
		csv
		express
		file
		class
		tensorflow
		sorting
		codeigniter
		perl
	
						MySQL Query :  SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5 
 MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3fde7-40a55.MAI); waiting for someone to free some space... (errno: 28 "No space left on device") 
 MySQL Errno : 1021 
 Message :  Disk full (/tmp/#sql-temptable-64f5-1b3fde7-40a55.MAI); waiting for someone to free some space... (errno: 28 "No space left on device") 
Need Help?