Component communication - parent-child component communication

Before learning component communication, we need to first understand what is a component and what is the meaning of component communication?

1. What is a component?

A component is a piece of html code that can be reused. The component reuses the structure of HTML and the style of css

2. What is the significance of component communication?

Make the component structure or data more flexible and get a higher reuse effect

3. What standards do components need to meet for communication?

The one-way data flow is the communication method that satisfies the father-to-child transmission

4. Parent-to-child component communication process?

• Copy the html code that needs to be split in the parent component to the child component, import the component into the parent component, and mount it directly
• Bind a custom property to the child component tag in the parent component and pass data to the child component
• The props in the child component to receive the data passed by the parent component, the class component: this.props, the function component: props

 

As shown in the figure above, in order to save code, use the least code and practice the most complete functions, so we use split components, split the same structure into a sub-component, and then pass the parent-childway to pass data

Code demo

Parent component

export default class App extends Component {constructor(){super()this.state={list1:['gentle','kind','beautiful'],list2:['12k-15k','15k-20k','20k-25k']}}render() {let {list1,list2}=this.statereturn (
)}}

Introduce a child component into the parent component, bind a list property to the child component, and pass data to the child component

Subcomponents

export default function List(props) {let {list}=propsreturn (
{list.map((item,index)=>{return (
{item}
)})}
)}

In child components, we use function components to directly call the props method to receive the passed data