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

Most people do not understand the knowledge points of this article "what is the way React passes parameters?", so the editor summarizes the following content to you, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what is the way to pass parameters to React?"

Passing parameters between parent and child components

The parent component passes a value to the child component, which can be implemented directly with this.props

In the parent component, add a custom attribute to the child component that needs to pass data, and the data passed by the parent component can be obtained through this.props in the child component.

/ / parent component render () {return (/ / use custom properties to pass methods or parameters)} / / child components / / the data passed by the parent component can be obtained through this.props.toson

If you still need to pass to the grandchild component, then continue to pass it through custom properties in the child component.

Tograndson= {this.props.toson}

The Sun component obtains the data through this.props.tograndson

If the child component passes a value to the parent component, you need to set the receiver function and state in the parent component, and pass the function name to the child component through props

That is, the method of passing the parent component to the child component, which is called in the child component

/ / grandchild component export default class Grandson extends Component {render () {return ({this.props.name}: male and female)}} / / subcomponent export default class Child extends Component {render () {return ({this.props.name}:)}} / / parent component export default class Parent extends Component {constructor (props) {super (props) this.state= {username:', sex:''}}, handleVal (event) {this.setState ({username: event.target.value});}, handleSelect (value) {this.setState ({sex: event.target.value}) }, render () {return (user name: {this.state.username} user gender: {this.state.sex})}

Some time ago, someone asked me such a question: what is the use of super () in constructor?

To sum up:

If you want to use this in the constructor of a subclass, you must call the parent class constructor, otherwise you will not get the this

So the question is, how do you call the constructor of the parent class? Through super ()

If you want to use the parameters passed by the parent component in constructor, you must pass the parameters to the parent component's constructor when calling the parent component super

If you don't use this in constructor, or parameters, you don't need super; because React and help you bind this,props

Routing parameters

Install npm install react-router-dom-- save-dev

Define a route (usually on the outside)

When the page jumps

This.props.history.push ({pathname:'/detail', state: {id:3}})} >

Receiving data that can be obtained through this.props.history.location

Routing parameters may have this problem, that is, only the components mounted when the route is defined will have the location history match in props.

Generally speaking, the component mounted on the route is Container.js. Normally, we will divide the UI.js component down and click to jump here. There is no location history match in the UI component props.

Need to use high-level components withRouter

State promotion

Promote the state that multiple components need to share to the nearest common parent component, which is then distributed to the child components through props

Context

When a component saves a state in its own context, all descendant components under that component can access the state without the transfer of an intermediate component, and the parent component of this component cannot be accessed

Class Index extends Component {static childContextTypes = {themeColor: PropTypes.string} constructor () {super () this.state = {themeColor: 'red'}} getChildContext () {return {themeColor: this.state.themeColor}} render () {return ()}}

Pass attributes to all descendant components through getChildContext ()

The component that provides context must provide childContextTypes as the declaration and validation of context.

Class Title extends Component {static contextTypes = {themeColor: PropTypes.string} render () {return (title)}}

If a subcomponent wants to get the content in context, it must write contextTypes to declare and verify the type of state you need to get. It is also required, and you cannot get the state in context if you do not write.

Title wants to get themeColor, which is a string, so we declare it in contextTypes.

Introduction of redux

Redux provides a predictable state management mechanism for React

Redux stores the entire application state in store,store and stores a state state tree

Components can dispatch action to store instead of notifying other components directly

Other components can refresh their views by subscribing to the status state in store

The above is the content of this article on "what is the way to transmit parameters in React". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

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.