Quels sont les moyens de passer des paramètres en réaction ?

React est une bibliothèque JAVASCRIPT permettant de créer des interfaces utilisateur.

React est principalement utilisé pour créer une interface utilisateur. Beaucoup de gens pensent que React est le V (vue) de MVC.

React est né d'un projet interne à Facebook, utilisé pour créer le site Web d'Instagram et a été open source en mai 2013.

React a des performances élevées et une logique de code très simple. De plus en plus de gens ont commencé à y prêter attention et à l'utiliser.

La chose la plus courante est de transmettre des paramètres entre les composants parent et enfant

Le composant parent transmet la valeur au composant enfant, ce qui peut être obtenu directement en utilisant this.props

Dans le composant parent, indiquez les besoins Ajoutez un attribut personnalisé au sous-composant qui transmet les données Dans le sous-composant, vous pouvez obtenir les données transmises par le composant parent via this.props

// 父组件 render() {        
    return (                // 使用自定义属性传递需要传递的方法或者参数
                <ShopUi toson={this.state}></ShopUi>            
                   )
    } 

//子组件　//通过this.props.toson就可以获取到父组件传递过来的数据 、、如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了
      tograndson={this.props.toson}
、、孙组件通过this.props.tograndson获取到数据

Si le sous-composant passe. une valeur au composant parent, elle doit être définie dans le composant parent. Recevoir la fonction et l'état, et transmettre le nom de la fonction au composant enfant via les accessoires

, qui est la méthode de transmission du composant parent à le composant enfant, et appelez-le dans le composant enfant

//孙子组件export default class Grandson extends Component{
    render(){        return (            <div style={{border: "1px solid red",margin: "10px"}}>
　　　　　　　　{this.props.name}：                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>        )
    }
}; 
//子组件export default class Child extends Component{
    render(){        return (            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}：<input onChange={this.props.handleVal}/>
                <Grandson name="性别" handleSelect={this.props.handleSelect}/>
            </div>        )
    }
}; 
//父组件export default class Parent extends Component{
 
    constructor(props){
        super(props)        this.state={
            username: &#39;&#39;,
            sex: &#39;&#39;
        }   
    },
    handleVal(event){        this.setState({username: event.target.value});
    },
    handleSelect(value) {        this.setState({sex: event.target.value});
    },
    render(){        return (            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用户姓名：{this.state.username}</div>
                <div>用户性别：{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>        )
    }
}

Quelqu'un m'a demandé il y a quelque temps, j'ai une question, à quoi sert super() dans le constructeur ?

Pour résumer :

Si vous souhaitez utiliser ceci dans le constructeur d'une sous-classe, vous devez appeler le constructeur de la classe parent, sinon vous n'obtiendrez pas cela

Ensuite, le un problème se pose, Comment appeler le constructeur de la classe parent ? Via super()

Si vous souhaitez utiliser les paramètres passés par le composant parent dans le constructeur, vous devez transmettre les paramètres au constructeur du composant parent lors de l'appel de super.

Si vous ne le faites pas utilisez ceci dans le constructeur, ou dans les paramètres, il n'y a pas besoin de super ; car React a fait cela pour vous, la liaison des accessoires

Paramètres de passage de route

Installer npm install réagir-router- dom --save-dev

Définir l'itinéraire (généralement placé à l'extérieur)

 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter>

Lorsque la page saute,

<li  onClick={el =>　this.props.history.push({
　　　pathname:&#39;/detail&#39;,
    　 state:{id:3}
})}>
</li>

reçoit les données transmises via this.props.history. emplacement.

Le passage des paramètres d'itinéraire peut avoir ce problème, c'est-à-dire que seul le composant monté lorsque l'itinéraire est défini aura l'historique de localisation correspondant dans les accessoires

Le composant monté sur l'itinéraire est généralement, il s'agit de Container.js. Généralement, nous séparerons le composant UI.js vers le bas et cliquerons pour sauter ici. Il n'y a pas de correspondance d'historique de localisation dans les accessoires du composant de l'interface utilisateur

. commander le composant avecRouter

Promotion de l'état

Promouvoir le statut que plusieurs composants doivent partager avec le composant parent commun le plus proche d'eux, puis le composant parent le distribue aux composants enfants via des accessoires

contexte

Lorsqu'un composant enregistre un certain état dans son propre contexte, tous les composants descendants de ce composant peuvent accéder à cet état sans avoir besoin du transfert de composants intermédiaires, et le composant parent de ce composant ne peut pas y accéder.

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}
通过getChildContext()将属性传递给所有的子孙组件
提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。

rrree

Présentation de redux

redux fournit un mécanisme de gestion d'état prévisible pour React

redux stocke l'intégralité de l'état de l'application dans le magasin, qui stocke une arborescence d'état

Les composants peuvent envoyer (expédier) des actions au magasin au lieu de notifier directement les autres composants

D'autres composants peuvent actualiser leurs propres vues en s'abonnant à l'état dans le magasin

Recommandations associées : tutoriel React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!