Komunikacja pomiędzy komponentami w React.js

[type-of-web-komentarze[bot]]

Komunikacja pomiędzy komponentami w React.js

Przyszedł ten moment, gdy Twoja aplikacja zaczyna się rozrastać i zmagasz się z różnymi problemami z architekturą. Zacznijmy od prostego problemu: Komunikacja pomiędzy komponentami. Ale nie tylko tymi, które są bezpośrednio obok siebie, ale też tymi dowolnie oddalonymi w aplikacji…

https://typeofweb.com/komunikacja-pomiedzy-komponentami-w-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Konrad Cieślukowski		2018-02-24 13:40

co do wpuszczania parametru do event handlera przekazywanego z rodzica, to nie lepiej tak:
onClick={() => userSelected(user)} ?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-25 11:47

Można, chyba lepiej ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr Aueternum	http://piotr-aueternum.ct8.pl/	2018-02-27 13:09

Będzie coś o render props?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-27 13:12

Pewnie tak ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Adam Pi		2019-01-04 11:27

Ja mam problem z emitter. Tutaj mój kod: https://codesandbox.io/s/l984n0m1w7
Podpinam wszystko jak w tutorialach i nadal nie uruchamia się nawet prosty console.log().
Co zrobiłem źle/czego nie zrobiłem?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nigdzie nie używasz emitter.emit(...).
Poza tym na zdarzenia powinieneś się podpinać w componentDidMount (a nie will), i koniecznie usuwać w componentWillUnmount.

Poza tym w tym przypadku event emitter jest totalnie zbędny, ten sam efekt osiągniesz jeśli przekażesz w props zwykły callback. EventEmitter będzie miał sens jeśli umieścisz go w innym pliku i zaimportujesz do komponentów, bez przekazywania go w propsach.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Navgar		2019-01-04 11:27

Przeszedłem przez cały kurs do tej pory, ale ćwiczenie jest zbyt mało zrozumiałe dla mnie.
Jak się używa biblioteki EventEmitter3? Co konkretnie mam komunikować?

Byłoby dobrze, gdybyś mógł napisać to w formie:
Skomunikuj {ten komponent } z {tym komponentem}, aby po przekazaniu {czegoś tam} do {tego komponentu}, było widoczne {to}, w {tym komponencie}.

Dziękuję za kurs, super sprawa!

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Czy teraz jasne? ;) Jeśli masz jakieś pytania to pisz!

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Hej :) Dzięki za uwagi. A więc:
Skomunikuj komponenty App i UsersList, aby po kliknięciu na użytkownika na liście, wyświetlał się on w komponencie App. Tak samo jak w przykładzie, tylko że bez użycia propsa userSelected.
Zamiast tego tworzymy współdzieloną instancję EventEmittera — App nasłuchuje na odpowiednie zdarzenie, a UsersList emituje zdarzenie gdy zostanie kliknięty element listy :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kasianie		2019-01-31 00:54

Cześć :) Udało się, ale nie jest pewna czy aby nie przekombinowałam. Nie wiedziałam jak przekazać usera do onClick w map. Jak lepiej to zrobić?
EventEmitter w osobnym pliku EmitterBase.

import React from "react";
import ReactDOM from "react-dom";
import EmitterBase from "./EmitterBase";

const userEmitter = new EmitterBase();
const allUsers = ["Asia", "Basia", "Witek", "Stefan"];

class UserList extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(event) {
let selectedUser = event.target.innerText;
userEmitter.emit("CLICKED_ITEM", { selectedUser });
}
render() {
if (this.props.users.length > 0) {
return (

      {this.props.users.map(user => (
        
          {user}
        
      ))}
    
  );
}
return No results!;

}
}

class App extends React.Component {
constructor() {
super();
this.state = {
filteredUsers: allUsers,
selectedUser: null
};
}
filterUsers = e => {
const text = e.currentTarget.value;
const filteredUsers = this.getFilteredUsersForText(text);
this.setState({
filteredUsers
});
};
getFilteredUsersForText = text => {
return allUsers.filter(user =>
user.toLowerCase().includes(text.toLowerCase())
);
};
onUserSelected = ({ selectedUser }) => {
this.setState({
selectedUser: selectedUser
});
};

componentDidMount() {
userEmitter.on("CLICKED_ITEM", this.onUserSelected);
}

componentWillUnmount() {
userEmitter.removeEventListener("CLICKED_ITEM", this.onUserSelected);
}

render() {
return (

    {this.state.selectedUser}
    
    
  
);

}
}

ReactDOM.render(, document.getElementById("root"));


 
 

Komentarz zaimportowany z WordPressa