Wyświetlenie komponentu bezpośrednio z funkcji

0

Dzień dobry,
czy można z funkcji w React wyświetlić komponent?
oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.
Pozdrawiam,
Łukasz

function App()
{
  var liczba = 10;
  if (liczba > 0 ) {
    return <Komponent wyswietl={true} /> ;
  }
2
virusek391 napisał(a):

czy można z funkcji w React js wyświetlić komponent?

https://reactjs.org/docs/components-and-props.html

Funkcja App z przykładu wygląda na zwykły komponent funkcyjny tylko trzeba dodać warunek, gdy liczba <= 0

function App()
{
  var liczba = 10;
  
  if (liczba > 0)
  {
    return <Komponent wyswietl={true} />;
  }

  return null;
}

i używasz jej jak normalnego komponentu <App />.

virusek391 napisał(a):

oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.

Możliwe, że chodziło Ci o coś innego ale to musiałbyś zaprezentować lepszy przykład.

0
Xarviel napisał(a):
virusek391 napisał(a):

czy można z funkcji w React js wyświetlić komponent?

https://reactjs.org/docs/components-and-props.html

Funkcja App z przykładu wygląda na zwykły komponent funkcyjny tylko trzeba dodać warunek, gdy liczba <= 0

function App()
{
  var liczba = 10;
  
  if (liczba > 0)
  {
    return <Komponent wyswietl={true} />;
  }

  return null;
}

i używasz jej jak normalnego komponentu <App />.

virusek391 napisał(a):

oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.

Możliwe, że chodziło Ci o coś innego ale to musiałbyś zaprezentować lepszy przykład.

Niestety nadal nie wyświetl komponentu

0
virusek391 napisał(a):
Xarviel napisał(a):
virusek391 napisał(a):

czy można z funkcji w React js wyświetlić komponent?

https://reactjs.org/docs/components-and-props.html

Funkcja App z przykładu wygląda na zwykły komponent funkcyjny tylko trzeba dodać warunek, gdy liczba <= 0

function App()
{
  var liczba = 10;
  
  if (liczba > 0)
  {
    return <Komponent wyswietl={true} />;
  }

  return null;
}

i używasz jej jak normalnego komponentu <App />.

virusek391 napisał(a):

oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.

Możliwe, że chodziło Ci o coś innego ale to musiałbyś zaprezentować lepszy przykład.

Niestety nadal nie wyświetl komponentu

Tutaj przedstawie właściwą sytuacje:

Otóż wywołuje sobie w funkcji powiedzmy o nazwie App()

funkcje DokumentUsunOknoWyboru
deklarując ją w taki sposób DokumentUsunOknoWyboru();

poniżej znajduje się jej kod źródłowy/ W skrócie gdy użytkownik kliknie w przycisk anuluj to powinien pojawić się komponent <KomponentUsunZlecenie />, a niestety tak się nie dzieje. Natomiast jeżeli wpiszę powiedzmy zamiast <KomponentUsunZlecenie /> np: alert("test"); to pojawia się komunikat z alertu.

export default function DokumentUsunOknoWyboru(props) {

  Swal.fire({
    title: 'Czy na pewno usunąć zlecenie?',
    text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
    icon: 'warning',
    showCancelButton: true,
    cancelButtonText: 'Anuluj',
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Tak, usuń',

  }).then((result) => {

    if (result.isConfirmed) {
      let id = 305
      fetch('http://192.168.1.4:3333/test', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id }),
      })
        .then(response => {
          return response.text();
        })
        .then(data => {
          if (data === 'wykonano') {
            Swal.fire(
              'Zrobione!',
              'Zlecenie zostało usunięte!',
              'success'
            )
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

    if (result.isDismissed) {
      <KomponentUsunZlecenie wyswietl={true} />

    }
  })
}
0
virusek391 napisał(a):
virusek391 napisał(a):
Xarviel napisał(a):
virusek391 napisał(a):

czy można z funkcji w React js wyświetlić komponent?

https://reactjs.org/docs/components-and-props.html

Funkcja App z przykładu wygląda na zwykły komponent funkcyjny tylko trzeba dodać warunek, gdy liczba <= 0

function App()
{
  var liczba = 10;
  
  if (liczba > 0)
  {
    return <Komponent wyswietl={true} />;
  }

  return null;
}

i używasz jej jak normalnego komponentu <App />.

virusek391 napisał(a):

oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.

Możliwe, że chodziło Ci o coś innego ale to musiałbyś zaprezentować lepszy przykład.

Niestety nadal nie wyświetl komponentu

Tutaj przedstawie właściwą sytuacje:

Otóż wywołuje sobie w funkcji powiedzmy o nazwie App()

funkcje DokumentUsunOknoWyboru
deklarując ją w taki sposób DokumentUsunOknoWyboru();

poniżej znajduje się jej kod źródłowy/ W skrócie gdy użytkownik kliknie w przycisk anuluj to powinien pojawić się komponent <KomponentUsunZlecenie />, a niestety tak się nie dzieje. Natomiast jeżeli wpiszę powiedzmy zamiast <KomponentUsunZlecenie /> np: alert("test"); to pojawia się komunikat z alertu.

export default function DokumentUsunOknoWyboru(props) {

  Swal.fire({
    title: 'Czy na pewno usunąć zlecenie?',
    text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
    icon: 'warning',
    showCancelButton: true,
    cancelButtonText: 'Anuluj',
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Tak, usuń',

  }).then((result) => {

    if (result.isConfirmed) {
      let id = 305
      fetch('http://192.168.1.4:3333/test', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id }),
      })
        .then(response => {
          return response.text();
        })
        .then(data => {
          if (data === 'wykonano') {
            Swal.fire(
              'Zrobione!',
              'Zlecenie zostało usunięte!',
              'success'
            )
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

    if (result.isDismissed) {
      <KomponentUsunZlecenie wyswietl={true} />

    }
  })
}
0
virusek391 napisał(a):
virusek391 napisał(a):
Xarviel napisał(a):
virusek391 napisał(a):

czy można z funkcji w React js wyświetlić komponent?

https://reactjs.org/docs/components-and-props.html

Funkcja App z przykładu wygląda na zwykły komponent funkcyjny tylko trzeba dodać warunek, gdy liczba <= 0

function App()
{
  var liczba = 10;
  
  if (liczba > 0)
  {
    return <Komponent wyswietl={true} />;
  }

  return null;
}

i używasz jej jak normalnego komponentu <App />.

virusek391 napisał(a):

oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.

Możliwe, że chodziło Ci o coś innego ale to musiałbyś zaprezentować lepszy przykład.

Niestety nadal nie wyświetl komponentu

Tutaj przedstawie właściwą sytuacje:

Otóż wywołuje sobie w funkcji powiedzmy o nazwie App()

funkcje DokumentUsunOknoWyboru
deklarując ją w taki sposób DokumentUsunOknoWyboru();

poniżej znajduje się jej kod źródłowy/ W skrócie gdy użytkownik kliknie w przycisk anuluj to powinien pojawić się komponent <KomponentUsunZlecenie />, a niestety tak się nie dzieje. Natomiast jeżeli wpiszę powiedzmy zamiast <KomponentUsunZlecenie /> np: alert("test"); to pojawia się komunikat z alertu.

export default function DokumentUsunOknoWyboru(props) {

  Swal.fire({
    title: 'Czy na pewno usunąć zlecenie?',
    text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
    icon: 'warning',
    showCancelButton: true,
    cancelButtonText: 'Anuluj',
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Tak, usuń',

  }).then((result) => {

    if (result.isConfirmed) {
      let id = 305
      fetch('http://192.168.1.4:3333/test', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id }),
      })
        .then(response => {
          return response.text();
        })
        .then(data => {
          if (data === 'wykonano') {
            Swal.fire(
              'Zrobione!',
              'Zlecenie zostało usunięte!',
              'success'
            )
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

    if (result.isDismissed) {
      <KomponentUsunZlecenie wyswietl={true} />

    }
  })
}

kod.txt

2 
export default function DokumentUsunOknoWyboru(props) {

  Swal.fire({
 (...)
  }).then((result) => {

Tu widzę problem. Że odpalasz jakieś efekty uboczne prosto w komponencie.

A do tego są haki (hooks), np. useEffect.

if (result.isDismissed) {
      <KomponentUsunZlecenie wyswietl={true} />

    }

To tak nie zadziała w JS. Po pierwsze komponenty react muszą zwrócić synchronicznie JSX, po drugie nawet nie zwracasz tego JSX, tylko tak sobie wywołujesz od czapy, imperatywnie. No i chciałbym zwrócić uwagę, że JS to nie jest Ruby czy Rust i nie zwraca ostatniej instrukcji jako return.

No, to tak nie działa.

Gdzieś na jakimś etapie nie rozumiesz, jak działa React. Myślę, że warto się cofnąć i spróbować jeszcze raz zrozumieć, jak to wszystko działa.

1

Hmm... czyli próbujesz wywołać kod asynchroniczny przed renderowaniem komponentu, ale niestety nie można zrobić tego w ten sposób. Trzeba wykorzystać tutaj useEffect i useState.

Nigdy nie korzystałem z tej biblioteki Swal.fire(...), więc trochę zgaduję, ale powinno zadziałać

import React, { useState, useEffect } from "react";

export default function DokumentUsunOknoWyboru(props) {
  // Tworzymy stan komponentu
  const [isDismissed, setIsDismissed] = useState(false);

  // Wywołujemy asynchroniczny kod po zamontowaniu komponentu w DOM
  useEffect(() => {
    Swal.fire({
      title: 'Czy na pewno usunąć zlecenie?',
      text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
      icon: 'warning',
      showCancelButton: true,
      cancelButtonText: 'Anuluj',
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Tak, usuń',
    }).then(result => {
      let id = 305
      
      if (result.isConfirmed) {
        fetch('http://192.168.1.4:3333/test', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ id }),
        })
        .then(response => {
           return response.text();
        })
        .then(data => {
           if (data === 'wykonano') {
             Swal.fire(
               'Zrobione!',
               'Zlecenie zostało usunięte!',
               'success'
             )
            }
         })
         .catch((error) => {
           console.log(error);
         });
       }

       if (result.isDismissed) {
         // Ustawiamy potrzebną wartość do wyświetlenia komponentu
         setIsDismissed(true);
       }
    })
  }, []);

  // Wyświetlamy komponent na podstawie nowego warunku
  return isDismissed 
    ? <KomponentUsunZlecenie wyswietl={true} />
    : null;
}

Nie jestem pewien, czy prawidłowo skopiowałem Twój przykład, bo całość piszę z telefonu, ale kod powinien się zmienić jedynie w tych miejscach, gdzie zostawiłem komentarz.

0
LukeJL napisał(a):
export default function DokumentUsunOknoWyboru(props) {

  Swal.fire({
 (...)
  }).then((result) => {

Tu widzę problem. Że odpalasz jakieś efekty uboczne prosto w komponencie.

A do tego są haki (hooks), np. useEffect.

if (result.isDismissed) {
      <KomponentUsunZlecenie wyswietl={true} />

    }

To tak nie zadziała w JS. Po pierwsze komponenty react muszą zwrócić synchronicznie JSX, po drugie nawet nie zwracasz tego JSX, tylko tak sobie wywołujesz od czapy, imperatywnie. No i chciałbym zwrócić uwagę, że JS to nie jest Ruby czy Rust i nie zwraca ostatniej instrukcji jako return.

No, to tak nie działa.

Gdzieś na jakimś etapie nie rozumiesz, jak działa React. Myślę, że warto się cofnąć i spróbować jeszcze raz zrozumieć, jak to wszystko działa.

Można powiedzieć że ten problem mam już rozwiązany w trochę inny sposób, tylko myślałem że da się to rozwiązać w taki sposób jak to opisałem na początku :)

0
virusek391 napisał(a):
virusek391 napisał(a):
Xarviel napisał(a):
virusek391 napisał(a):

czy można z funkcji w React js wyświetlić komponent?

https://reactjs.org/docs/components-and-props.html

Funkcja App z przykładu wygląda na zwykły komponent funkcyjny tylko trzeba dodać warunek, gdy liczba <= 0

function App()
{
  var liczba = 10;
  
  if (liczba > 0)
  {
    return <Komponent wyswietl={true} />;
  }

  return null;
}

i używasz jej jak normalnego komponentu <App />.

virusek391 napisał(a):

oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.

Możliwe, że chodziło Ci o coś innego ale to musiałbyś zaprezentować lepszy przykład.

Niestety nadal nie wyświetl komponentu

Tutaj przedstawie właściwą sytuacje:

Otóż wywołuje sobie w funkcji powiedzmy o nazwie App()

funkcje DokumentUsunOknoWyboru
deklarując ją w taki sposób DokumentUsunOknoWyboru();

poniżej znajduje się jej kod źródłowy/ W skrócie gdy użytkownik kliknie w przycisk anuluj to powinien pojawić się komponent <KomponentUsunZlecenie />, a niestety tak się nie dzieje. Natomiast jeżeli wpiszę powiedzmy zamiast <KomponentUsunZlecenie /> np: alert("test"); to pojawia się komunikat z alertu.

export default function DokumentUsunOknoWyboru(props) {

  Swal.fire({
    title: 'Czy na pewno usunąć zlecenie?',
    text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
    icon: 'warning',
    showCancelButton: true,
    cancelButtonText: 'Anuluj',
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Tak, usuń',

  }).then((result) => {

    if (result.isConfirmed) {
      let id = 305
      fetch('http://192.168.1.4:3333/test', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id }),
      })
        .then(response => {
          return response.text();
        })
        .then(data => {
          if (data === 'wykonano') {
            Swal.fire(
              'Zrobione!',
              'Zlecenie zostało usunięte!',
              'success'
            )
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

    if (result.isDismissed) {
      <KomponentUsunZlecenie wyswietl={true} />

    }
  })
}

Dodałem przed chwilą return i nadal nic :(

0
virusek391 napisał(a):
virusek391 napisał(a):
virusek391 napisał(a):
Xarviel napisał(a):
virusek391 napisał(a):

czy można z funkcji w React js wyświetlić komponent?

https://reactjs.org/docs/components-and-props.html

Funkcja App z przykładu wygląda na zwykły komponent funkcyjny tylko trzeba dodać warunek, gdy liczba <= 0

function App()
{
  var liczba = 10;
  
  if (liczba > 0)
  {
    return <Komponent wyswietl={true} />;
  }

  return null;
}

i używasz jej jak normalnego komponentu <App />.

virusek391 napisał(a):

oto poglądowa funkcja którą zrobiłem, ale ona niestety nie wyświetla komponentu.

Możliwe, że chodziło Ci o coś innego ale to musiałbyś zaprezentować lepszy przykład.

Niestety nadal nie wyświetl komponentu

Tutaj przedstawie właściwą sytuacje:

Otóż wywołuje sobie w funkcji powiedzmy o nazwie App()

funkcje DokumentUsunOknoWyboru
deklarując ją w taki sposób DokumentUsunOknoWyboru();

poniżej znajduje się jej kod źródłowy/ W skrócie gdy użytkownik kliknie w przycisk anuluj to powinien pojawić się komponent <KomponentUsunZlecenie />, a niestety tak się nie dzieje. Natomiast jeżeli wpiszę powiedzmy zamiast <KomponentUsunZlecenie /> np: alert("test"); to pojawia się komunikat z alertu.

export default function DokumentUsunOknoWyboru(props) {

  Swal.fire({
    title: 'Czy na pewno usunąć zlecenie?',
    text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
    icon: 'warning',
    showCancelButton: true,
    cancelButtonText: 'Anuluj',
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Tak, usuń',

  }).then((result) => {

    if (result.isConfirmed) {
      let id = 305
      fetch('http://192.168.1.4:3333/test', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id }),
      })
        .then(response => {
          return response.text();
        })
        .then(data => {
          if (data === 'wykonano') {
            Swal.fire(
              'Zrobione!',
              'Zlecenie zostało usunięte!',
              'success'
            )
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

    if (result.isDismissed) {
      <KomponentUsunZlecenie wyswietl={true} />

    }
  })
}

Dodałem przed chwilą return i nadal nic :(

Rozumiem że chodzi o ten wcześniejszy kod który nie działał mi, to tam dodałem to w taki sposób:
if (result.isDismissed) {
return <KomponentUsunZlecenie wyswietl={true} />}

1

Podstawowe renderowanie komponentów Reacta jest synchroniczne, a Twój kod, który wstawileś jest asynchroniczny i dlatego to razem ze sobą nie działa.

W komponentach funkcyjnych do asynchroncznego kodu wykorzystujemy eventy, lub hooki takie jak useEffect z mojego wcześniejszego przykladu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1