This article provides an overview of how to write a React component. For a quick demonstration, the sample code presented in this article is built using the react-create-app recommended scaffolding quick-build project, the React-create-app portal.
I. Introduction of components
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Components allow you to slice up the UI into separate, reusable chunks for individual consideration and development
Two, component writing method
Presentation components (Pure Component, function Component)
Presentable components are used to present styles, they bind nothing, have no dependencies, and are typically implemented as stateless functional components.
// BlogList.jsimport React from "react";
export const BlogList = bloglist => (
<ul>
{bloglist.map(({ body, author,id }) =>
<li key={id}>{body}-{author}</li>
)}
</ul>
)Copy the codeDefine a component using class
import React from "react";
class Welcome extends React.Component {
render() {
return<h1>Hello, {this.props.name}</h1>; }}Copy the codeThree, component writing
Demo 1
For example, create a components folder in the directory generated with react-create-app to store our components.
Then add bloglist.js to our app.js
Finally, view it on the page
Demo 2
Angular Js and Vue have recently been used to write forms based on two-way data binding, which is quite happy to write. Of course, React’s one-way data flow has its own advantages. Based on this, we can package the commonly used form controls in the project as components. The following column is checkbox.
Stap1:
First we create the Checkbox folder and the checkbox.js file under the Components folder
Stap2:
Write the checkbox.js file as you would normally write a page and reference it in app.js
// Checkbox.js
import React,{Component} from 'react';
class CheckBox extends Component {
render() {
return (
<label><input type="checkbox"/> Click me </label>)}}export default CheckBox;
Copy the code// App.js
import CheckBox from './compoents/CheckTest/CheckTest'.return (
<div className="App">... <div> <CheckBox></CheckBox> </div> </div> );Copy the code
So our Checkbox component is loaded into the page, but we write “click me” on the label. How do we implement dynamic replacement?
// Checkbox.js <span> {this.props.children ! == undefined ? this.props.children : null} </span>Copy the code// App.js
render() {
return (
<div className="App">... < div > < the CheckBox > new click I < / CheckBox > < / div > < / div >). }Copy the codeSo far, we have implemented a stateless Checkbox, but in development, we need to obtain the Checkbox status, if there are multiple checkboxes, we need to obtain which checkboxes are selected.
stap3:
// Checkbox.js
import React from "react"import "./CheckBox.less"
class CheckBox extends React.Component {
constructor(props) {
super(props)
this.checkCheckBox = this.checkCheckBox.bind(this);
this.state = {
value: props.value || ' '}}checkCheckBox() {
const onChange = this.props.onChange;
const value = this.props.value;
if(onChange) { onChange(value); }}render() {
let {value} = this.state;
return (
<label>
<input value={value} type="checkbox"onClick={this.checkCheckBox}/> {this.props.children ! == undefined ? this.props.children : null} </label> ) }}export default CheckBox;Copy the codeIn the code above, our Checkbox receives the value and onChange method from the parent, and when clicked, passes in the value of the component and retrieves it from the parent
class App extends Component {
onChange=(value)=>{
console.log('Current click',value)
}
render() {
return (
<div className="App">... <div> <CheckBox value='checkbox1' onChange={this.onChange}>checkbox1</CheckBox>
<CheckBox value='checkbox2' onChange={this.onChange}>checkbox2</CheckBox>
</div>
</div>
);
}}Copy the codeSo you can see it on the console every time you click
stap4:
Now there is a new requirement to check the checkbox status in the parent component when the checkbox is loaded.
class CheckBox extends React.Component {
constructor(props) {
super(props)
this.checkCheckBox = this.checkCheckBox.bind(this);
this.state = {
is_checked: props.checked || false,
value: props.value || ' '}}render() {
let {is_checked,value} = this.state;
return (
<label>
<input value={value} type="checkbox"onClick={this.checkCheckBox} checked={is_checked}/> {this.props.children ! == undefined ? this.props.children : null} </label> ) }}Copy the codeThe Checkbox component is checked, meaning that its checked state is linked to the checked property passed from the parent component.
stap5:
Our Checkbox components are generally not loaded separately, especially in business scenarios with many options, Checkbox components are grouped. We hope that when clicking, we can get the array of checkboxes selected in the parent component, and change the Checkbox checked state.
Create a CheckboxGroup folder under the Components folder and create checkboxGroup.js under the components folder. Post the code first, then analyze it
import React from "react"
import "./CheckboxGroup.less"
import PropTypes from 'prop-types';
class CheckboxGroup extends React.Component {
constructor(props) {
super(props)
this.state = {
value: props.value || props.defaultValue || [],
};
this.toggleOption = this.toggleOption.bind(this);
}
componentWillReceiveProps(nextProps) {
if ('value' innextProps) { this.setState({ value: nextProps.value || [], }); }}getChildContext() {
return {
checkboxGroup: {
toggleOption: this.toggleOption,
value: this.state.value,
},
};
}
toggleOption(option) {
const optionIndex = this.state.value.indexOf(option.value);
const value = [...this.state.value];
if (optionIndex === -1) {
value.push(option.value);
} else {
value.splice(optionIndex, 1);
}
if(! ('value' in this.props)) {
this.setState({value});
}
const onChange = this.props.onChange;
if(onChange) { onChange(value); }}render() {
const {children, className} = this.props
return (
<div className={className}>
{children}
</div>
)
}}
CheckboxGroup.childContextTypes = { checkboxGroup: PropTypes.any,};export default CheckboxGroupCopy the codeCode analysis: Start with Render
render() {
const {children, className} = this.props
return (
<div className={className}>
{children}
</div>
)
}Copy the codeCheckboxGroup (Checkbox, Checkbox, Checkbox, Checkbox, Checkbox, Checkbox);
getChildContext() {
return {
checkboxGroup: {
toggleOption: this.toggleOption,
value: this.state.value,
},
};
}Copy the codeGetChildContext can be passed to component properties. It is important to note that the properties specified by getChildContext to be passed to child components need to be specified by childContextTypes first, otherwise an error will be generated.
CheckboxGroup.childContextTypes = {
checkboxGroup: PropTypes.any,
};Copy the codeThen he will return to child components need getChildContent properties, at the same time componentWillReceiveProps monitor props in the life cycle of change and update the CheckBox selected.
At the same time, checkbox.js should also be modified accordingly
import React from "react"
import "./CheckBox.less"
import PropTypes from 'prop-types';
import CheckboxGroup from '.. /CheckboxGroup/CheckboxGroup.js'
class CheckBox extends React.Component {
constructor(props) {
super(props)
this.checkCheckBox = this.checkCheckBox.bind(this);
this.state = {
is_checked: props.checked || false,
value: props.value || ' '}}checkCheckBox() {
const {checkboxGroup} = this.context;
if (checkboxGroup) {
checkboxGroup.toggleOption({label: this.props.children, value: this.props.value})
} else {
const onChange = this.props.onChange;
const value = this.props.value;
if(onChange) { onChange(value); }}}render() {
let {is_checked, value} = this.state;
const {checkboxGroup} = this.context;
if(checkboxGroup) { is_checked = checkboxGroup.value.indexOf(this.props.value) ! = = 1; }return (
<label>
<input value={value} type="checkbox"checked={is_checked} onClick={this.checkCheckBox}/> {this.props.children ! == undefined ? this.props.children : null} </label> ) }} CheckBox.Group = CheckboxGroup; CheckBox.contextTypes = { checkboxGroup: PropTypes.any, }export default CheckBox;
Copy the codeThe toggleOption method of the checkboxGroup property is called and the current value is passed to the context. This is controlled by the CheckboxGroup component and is also checked during rendering to determine who determines the selected status. Then go to app.js and reference it.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import CheckBox from './compoents/CheckBox/CheckBox'
const CheckboxGroup = CheckBox.Group;
class App extends Component {
state={
checkList:[]
}
selectCheckBtn=(values)=>{
console.log(values)
this.setState({
checkList:values
})
}
render() {
const {checkList} = this.state
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<CheckboxGroup value={checkList} onChange={this.selectCheckBtn}>
<CheckBox value={'1'}> button 1</CheckBox> <CheckBox value={'2'}> button 2</CheckBox> <CheckBox value={'3'}> button 3</CheckBox> <CheckBox value={'4'}> button 4</CheckBox> </CheckboxGroup> </div>); }}export default App;
Copy the codeFinally, open the console and click the button.
Here we have a simple checkBox component.
conclusion
React components are easy to write, but not easy to write properly. There are some mature UI component libraries, such as Ant Financial’s Antd Design. Learn about their design philosophy.