Was ist der richtige Weg in reactjs?

Question

Ich bin neu zu reagieren. In meinem Projekt habe ich eine Home Komponente.

class Home extends Component { 

     logOut(){ 
      console.log('log out in side home js'); 
      this.props.LogOutAction(); 
      localStorage.setItem('loginFlag', null); 
     } 

     render(){ 

       return(
         <div> 
          <Header /> 
          <br/> 
          <div className="col-md-12 "> 
           <div className="col-md-3 home-border"> 
             a 
           </div> 
           <div className="col-md-6 home-border"> 
            <User/> 

           </div> 
           <div className="col-md-3 home-border"> 
             c 
           </div> 
          </div> 
         </div> 
       ) 
     } 
} 

Und meine User Komponente ist

class User extends React.Component { 

     viewProfile(id){ 

     } 

     render() { 
       var userdetails  = [ {"id":"1", "name":"Abraham", "country": "USA", "age":"29", "image":""}, 
              {"id":"2", "name":"Gregory", "country": "Canada", "age":"23", "image":""}, 
              {"id":"3", "name":"Mathews", "country": "Newzeland", "age":"24", "image":""}, 
              {"id":"4", "name":"Williamson", "country": "China", "age":"27", "image":""}, 
              {"id":"5", "name":"Edwerd", "country": "Germany", "age":"22", "image":""} 
           ]; 
       var myStyle = { 
             border:"1px solid black", 
             height:"170px", 
           } 

       return(
         <div> 
          <div> 
           {userdetails.map((data, i) => <div className="col-md-12 div-bottom" style={myStyle} key={i}> 

             <div className="col-md-12"> 
              <div className="col-md-12"> 
               <img className="img-thumbnail img-margin" width="150" height="236" src = {'profile.jpg'} /> 
              </div> 
              <div className="col-md-12 div-bottom"><label>{data.name}</label></div> 
              <div className="col-md-12 div-bottom"> 
               <div className="col-md-6"><label>age:</label> {data.age}</div> 
               <div className="col-md-3"><label>Country:</label> {data.country}</div> 
              </div> 
              <div className="col-md-4 .div-bottom"><button className="btn btn-primary" onClick={ () => { this.viewProfile(data.id) } }>view Profile</button></div> 
             </div> 
            </div>) 
           } 
          </div> 
         </div> 
       ) 
     } 

} 

ich die mehr Benutzerdaten anstelle von ‚c‘ in der Home Komponente auf den Button klicken im User Component.What zeigen wollen, ist die korrekte Methode und wie es geht ?. Vielen Dank im Voraus.

Answer 1

Es gibt zwei Ansätze. Erstens ist nur zu reagieren. Sie erstellen eine übergeordnete Komponente, die den Status der App enthält. In der übergeordneten Komponente können Sie eine Funktion erstellen, die den Status ändert. Sie können die Funktion an Ihre Benutzerkomponente und den Status an die Home-Komponente übergeben.

Simplified:

const Home = ({ user }) => <div>{user.name}</div>; 
const User = ({ changeUser }) => { 
    const users = [ 
    { name: 'User1' }, 
    { name: 'User2' }, 
    ]; 

    const renderUsers =() => users.map(
    user => <li onClick={() => changeUser(user)}>{user.name}</li> 
); 

    return <ul>{renderUsers()}</ul>; 
}; 

class Parent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.changeUser = this.changeUser.bind(this); 

    this.state = { user: null }; 
    } 

    changeUser(user) { 
    this.setState({ user }); 
    } 

    render() { 
    return (
     <div> 
     <Home user={this.state.user} /> 
     <User changeUser={this.changeUser} /> 
     </div> 
    ); 
    } 
} 

Wenn jedoch Ihre Anwendung wächst wird es sehr kompliziert, den Zustand über eine übergeordnete Komponente zu verwalten. Sie können so etwas wie eine "Flux" -Architektur verwenden. "Redux" ist der gebräuchlichste Weg in der React-Welt zum Aufbau von Flux-ähnlichen Architekturen.

Answer 2

Sie können ein Ereignis als Requisiten senden und es von einer anderen Komponente aufrufen.

Sagen Sie bitte eine Klasse

Class Home { 

    handleChange(evt) { 
     this.setState({ username: evt.target.value }); 
    } 

    render { 
     return ( 
      <div> 
       <Users name={this.state.username} onChange={this.handleChange}/> 
       <div> {this.state.username} </div> 
      </div> 
     ); 
    } 
} 

Kinder Komponente

Class Users { 

    handleChange() { 
     //logic 
    } 

    render { 
     return (
      <div> 
       <input type="text" onChange={this.props.onChange}/> 
       {this.props.name} 
      </div> 
     ); 
    } 
} 

• Hier in der Komponente Benutzer haben, wenn Sie die Eingabe ändern wird es Startseite die Methode der Klasse aufrufen und Zustand aktualisieren von zu Hause.
• nun den aktualisierten Zustand bekommen als Requisiten in der Komponente Benutzer Sie den geänderten Text geben wird, die Sie gerade
eingegeben

Answer 3

Was für ‚a‘ stehen wird?

Zunächst wer fragt Sie Benutzerdaten?

Ich denke, Home muss Serveraufrufe verarbeiten, dann müssen Sie diese Daten im Status der Home-Komponente speichern, dann müssen Sie sie als Requisiten an die Benutzer- und UserDetails-Komponente übergeben.

Meiner Meinung nach Flux oder Redux werden nur benötigt, wenn Ihre Anwendung wirklich groß wird, und Sie nicht zu viele Server-Anrufe während der Sitzung haben möchten.

Als Tipps, wenn Ihre Benutzer und Userdetails Komponenten nur Daten visualisieren möchten, können Sie versuchen, sie ‚stateless‘ (siehe stateless components) Gebrauch zu machen, als Art und Weise müssen Sie nicht willReceiveProps behandeln.

können Sie Handle ‚viewProfile‘ Verfahren in der Hauptkomponente, aus der Benutzerkomponente mit einem Rückruf der Rufnummer (als Stütze bestanden)