如何在 react.js 中将数据从父级传递给子级

IT技术 javascript reactjs redux
2021-05-01 00:03:24

我有一个有 1 个孩子的父组件。我正在通过props传递数据来更新我的孩子。最初，它工作正常，但是当我单击按钮并使用 setState 更新状态时，在 setState 完成时，子项将使用旧值呈现。我已经在孩子中使用 componentWillReceiveProps 解决了它，但这是正确的方法吗？

在下面的代码中，如果我在 filterResults 函数中执行 setState ，它不会更新 Emplist 组件。 

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>
            )
    }
}

3个回答

如果你想从父级传递给子级，你可以使用 props 传递，如果你不想做相反的事情，你可以将一个函数从父级传递给子级，然后使用这个传递的函数将某些东西发送回父级。

孩子看起来像这样

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>
        )
    }
}

父母看起来像这样

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>
        )
    }
}

问题是您正在为此分配值，这不是一个好习惯。在此处检查在 React 中声明变量的位置。

如果你不使用props来做任何复杂的操作。这应该有效。

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>
            )
    }
}

您的 next 和 emplist 类属性可直接从您的 props 派生，因此您实际上并不需要它们。您可以通过以下方式进行

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>
           )
       }
    }
}

但是，如果您要根据props做出真正复杂的决定，那么结合componentWillReceiveProps和componentDidMount/componentWillMount是正确的做法。

其它你可能感兴趣的问题
上一篇Ender 4 打印机停止中间打印的问题 下一篇react表迭代对象数组以打印列中的值