Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use props to achieve parent-child component communication in react". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "how to use props to achieve parent-child component communication in react" can help you solve the problem.

The overall idea of realizing the two-way data flow of parent and child components is:

1. The parent component can pass data with initialized child components in the props,props to the child components, as well as callback functions

2. When the state of a child component changes, the callback function passed in by the parent function is manually triggered in the event handler function of the child component, and the data of the child component is passed back (there is time to study)

Parent component

A function is defined in the parent component, which contains a parameter of props, which is passed to the child component using super (props) in the function. The this.state is used to define the variables to be used on this page and passed to the child component.

This form is used in the render function of the parent component to pass to the child component

(ps: nesting between components is also included in this example, and the first letter of the component name must be capitalized, otherwise an error will be reported.)

Import React from 'react';import Footer from'. / footer.js'import Table from'. / table.js'class pagedemo extends React.Component {constructor (props) {super (props) This.state = {list: [{'id':'1',' title':'123', 'time':'2017',' person':'cheny0815', 'type':'type',' operation':'operation'}, {'id':'2',' title':'456', 'time':'2017',' person':'cheny0815', 'type':'type' 'operation':'operation'}, {' id':'3', 'title':'789',' time':'2017', 'person':'cheny0815',' type':'type', 'operation':'operation'}]} render () {let list = this.state.list Return (communication between components / component nesting);}} export default pagedemo

Sub-component (table.js)

The child component calls the parameters passed by the parent group and passes the value.

Import React from 'react';function table (props) {console.log (props) Return (content initiator type time operation {props.list.map (function (name) {/ / accepts the value passed by the parent component and processes return ({name.title} {name.person}) {name.type} {name.time} {name.operation})})} export default table This is the end of the introduction on "how to use props to achieve parent-child component communication in react". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.