webentwicklung-frage-antwort-db.com.de

Wie werden Daten von "parent" an "child" in "react.js" übergeben?

Ich habe eine übergeordnete Komponente, die 1 Kind hat. Ich aktualisiere mein Kind, indem ich Daten durch Requisiten leite. anfänglich funktioniert es einwandfrei, aber wenn ich auf eine Schaltfläche klicke und den Status mithilfe von setState aktualisiere, wird das untergeordnete Element mit alten Werten gerendert, wenn setState beendet ist. Ich habe es mit ComponentWillReceiveProps im Kind gelöst, aber ist das der richtige Weg?

Im folgenden Code wird die Emplist-Komponente nicht aktualisiert, wenn ich die Funktion setState in filterResults setze. 

import React, { Component } from 'react';
import {Search} from './search-bar'
import Emplist from './emplist'

class App extends Component {
    constructor(props){
        super(props);
        this.emp=[{
            name:'pawan',
            age:12
        },
        {
            name:'manish',
            age : 11
        }]
        this.state={emp:this.emp};
        this.filterResults=this.filterResults.bind(this);
    }

    filterResults(val)
    {
        if(this.state)
        {
            let filt=[];
            filt.Push(
                this.emp.find(e=>{
                    return e.age==val
                })
            );
            this.setState({emp:filt});
        }
    }

    render() {
        return (
            <div className="App">
                <Search filterResults={this.filterResults}/>
                <Emplist emp={this.state.emp}/>
            </div>
        );
    }
}
export default App;

EmpList Componet

import React,{Component} from 'react'

export default class Emp extends Component
{
    constructor(props){
        super(props);
        
        this.emplist=this.props.emp.map(e=>{return <li>{e.name}</li>});
        this.next=this.emplist;
    }

    componentWillReceiveProps(nextProps,nextState,prevProps,prevState,nextContext,prevContext){
        // this.props.updated(this.props.empo);
        this.next=nextProps.emp[0];
        if(this.next)
            this.emplist= nextProps.emp.map(e=>{return <li>{e.name}</li>});
    }

    render(){
        if(!this.next)
            return <div>name not found</div>
        else
            return (
                <div>
                    <br/>
                    <p>The list is here</p>
                    <ul>
                        {this.emplist}
                    </ul>
                </div>
            )
    }
}

javascriptreactjsredux
6
pKay

Wenn Sie von einem Elternteil an ein Kind übergeben werden möchten, können Sie Requisiten übergeben, und wenn Sie den Vorgang rückgängig machen möchten, können Sie eine Funktion von einem Elternteil an ein Kind übergeben und dann diese übergebene Funktion verwenden, um etwas an das Elternteil zu senden.

kind wird so aussehen

class Reciepe extends Component{
    render(){
        const { title, img, instructions } = this.props;
        const ingredients=this.props.ingredients.map((ing,index)=>(<li key={index} >{ing}</li>));
        return (
            <div className='recipe-card'>
                <div className='recipe-card-img'> <img src={img} alt={title}/> </div>
                <div className='recipe-card-content'>
                    <h3 className='recipe-title'>Reciepe {title}</h3>
                    <ul> {ingredients} </ul>
                    <h4>Instructions:</h4>
                    <p>{instructions}</p>
                </div>
            </div>
        )
    }
}

eltern werden so aussehen

class RecipeList extends Component{
    render(){
        return (
            <div style={{'display':'flex'}}>
                {this.props.recipes.map((item,index)=>(
                    <Recipe key={index}
                        title={item.title}
                        ingredients={item.ingredients}
                        instructions={item.instructions}
                        img={item.img}
                    />
                ))}
            </div>
        )
    }
}
5
HimanshuArora9419

Das Problem ist, dass Sie diesem Wert Werte zuweisen, was keine gute Praxis ist. Prüfen Sie, wo die Variable in React hier deklariert werden soll.

Wenn Sie die Requisiten nicht für komplexe Vorgänge verwenden. Das sollte funktionieren.

EmpList Componet

import React, {Component} from 'react'

export default class Emp extends Component {

    constructor(props) {
        super(props);
    }

    render() {

        if (!this.next)
            return <div>name not found</div>;
        else
          return (
              <div>
                  <br/>
                  <p>The list is here</p>
                  <ul>
                      {this.props.emp && this.props.emp.map(e => <li>{e.name}</li>)}
                  </ul>
              </div>
            )
    }
}

0
Brijesh Bhakta

Die Eigenschaften der nächsten und der Emplist-Klasse lassen sich direkt von Ihren Requisiten ableiten und benötigen Sie daher nicht wirklich. Sie könnten es auf folgende Weise tun

import React,{Component} from 'react'

export default class Emp extends Component{

    render(){
        const { emp } = this.props;
        if(!emp || emp.length === 1)
            return <div>name not found</div>
        else {
           return (
              <div> 
                 <br/> <p>The list is here</p>
                 <ul>
                   {emp.map(e=>{return <li>{e.name}</li>});}
                 </ul>
              </div>
           )
       }
    }
}

Wenn Sie jedoch wirklich komplexe Entscheidungen auf der Grundlage von Requisiten treffen, ist eine Kombination aus componentWillReceiveProps und componentDidMount/componentWillMount der richtige Ort dafür.

0
Shubham Khatri