Блог

Главная - Вопросы по программированию - React HOC предотвращает передачу реквизита из index.js чтобы app.js

React HOC предотвращает передачу реквизита из index.js чтобы app.js

#reactjs

#reactjs

Вопрос:

проблема -> я создал компонент более высокого порядка (hoc) (то есть withClass). чем я не получаю данные через реквизиты из index.js чтобы app.js . как будто я не получаю значения реквизита заголовка в app.js .

где я ошибаюсь.

я получаю эту проблему только после hoc. до этого все работало нормально.

 //App.js

import React, { Component } from 'react';
import classes from './App.module.css';

import Persons from '../components/Persons/Persons';
import Cockpit from '../components/Cockpit/Cockpit';
import Aux from '../hoc/Auxilary';
import withClass from '../hoc/withClass';

class App extends Component{
  
  constructor(props)
  {
    super(props);
    console.log("[App.js] constructor");
  }


  state = {    
    persons:[
      { id:'asfgfg34',name:'amrish',age:24},
      { id:'asdf343',name:'amrish1',age:24},
      { id:'232cvf',name:'amrish2',age:23}
    ],
    showPersons:false ,
    showCockpit:true
   };
   
   static getDerivedStateFromProps(props,state)
   {
     console.log('[App.js] getDerivedStateFromProps',props);
     return state;
   }

   componentDidMount(){
     console.log('[App.js] componentDidMount'); 
     console.log(this.props.title); // here i am getting undefined 
   }
   componentDidUpdate() {
    console.log("componentDidUpdate");
  
  }
  
  
  deletePerson = (index)=>{

    let person = [...this.state.persons];
    person.splice(index,1);

    this.setState({persons:person});
   };

  nameChangedHandler = (event,id) =>{

    const personIndex = this.state.persons.findIndex(person=>{
      return person.id === id;
    });

   // console.log("before update=" this.props.persons);

    const personUpdated = {
      ...this.state.persons[personIndex]
    };
   // console.log(personUpdated)  ;
    personUpdated.name = event.target.value;

    console.log(personUpdated.name);


    const persons = [...this.state.persons];

    persons[personIndex] = personUpdated;


    this.setState({
      persons:persons
    });

    //console.log("after update=" this.props.persons);

  };
  
  togglePersonsHandler = ()=>{
    const doesShow = this.state.showPersons;
    this.setState({showPersons:!doesShow});
   };


    render()
    { 
      console.log('[App.js] render');
      let person = null ;
      let cockpit = null;
      if(this.state.showPersons)
      { 
        person = (
              <Persons  persons={this.state.persons} 
              deletePerson = {this.deletePerson}
              nameChangedHandler = {this.nameChangedHandler}
                />
        );
        
      }

      if(this.state.showCockpit)
      {
        cockpit = (
          <Cockpit  togglePersonsHandler={this.togglePersonsHandler}  showPersons ={this.state.showPersons}
          personsLength = {this.state.persons.length}
          title={this.props.title}
          />
        );
      }
      
      return (
        
        <Aux>
          <button  onClick={()=>{ let isshown = !this.state.showCockpit;return this.setState( {showCockpit : isshown} )} }>Remove cockpit</button>
          {
            cockpit
          }
          {
            person
          }        
        </Aux>
        
      );
      
    }
    
    }
    
export default withClass(App,classes.App);  // i have made this higher order component after that i 
//am facing this issue.




//index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';

// i am passing title from this file as "Person Manager"

ReactDOM.render(
    <App title="Person Manager"/>
 ,
  document.getElementById('root')
);

serviceWorker.unregister();  

 //withClass.js

import React from 'react';

const withClass = (WrappedComponent,classes)=>{
    
    return props=> (
        <div  className={classes}>
            <WrappedComponent></WrappedComponent>
        </div>
    );
};

export default withClass;

Комментарии:

1. Вам необходимо передать реквизит обернутому компоненту в HOC. Что-то вроде <WrappedComponents {...props} />

2. большое вам спасибо, все работает нормально. но не могли бы вы, пожалуйста, объяснить. почему я должен передавать туда реквизит.

Ответ №1:

HOC создает исходный компонент, заключая его в другой компонент. Таким образом, вы получаете вложенный компонент. Когда вы передаете реквизиты компоненту HOC, вы должны передать их исходному компоненту, чтобы иметь возможность использовать их там. Дополнительная информация об этом содержится в документации React

Итак, ваш HOC должен выглядеть следующим образом:

 import React from 'react';

const withClass = (WrappedComponent,classes)=>{
    
    return props=> (
        <div  className={classes}>
            <WrappedComponent {...props} />
        </div>
    );
};

export default withClass;