Languages
[Edit]
PL

React - jak wy┼Ťwietli─ç lub ukry─ç element?

3 points
Created by:
Frida-Timms
607

W tym artykule chcieliby┼Ťmy pokaza─ç, jak wy┼Ťwietla─ç┬álub ukrywa─ç elementy w React.

Rozwi─ůzanie z jednym przyciskiem

W poni┼╝szym przyk┼éadzie przedstawiamy proste rozwi─ůzanie wykorzystuj─ůce przycisk,┬ákt├│ry┬áukrywa lub┬áwy┼Ťwietla nasz element┬á<div>M├│j element</div>┬á.

Używamy hooka React.useState do przechowywania stanu naszego elementu (widoczny lub ukryty).
Domy┼Ťlnie element jest ukryty. Aby zmieni─ç jego widoczno┼Ť─ç, musimy przekaza─ç zanegowany┬áargument visible┬ádo funkcji┬áonClick┬áobs┼éuj─ůcej┬ázdarzenie.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Ukryj' : 'Wy┼Ťwietl'}
      </button>
      {visible && <div>M├│j element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Rozwi─ůzanie z dwoma przyciskami

W poni┼╝szym przyk┼éadzie przedstawiamy rozwi─ůzanie z dwoma oddzielnymi┬ákomponentami przycisk├│w┬ádo pokazywania i ukrywania elementu┬á<div>M├│j element</div>.

U┼╝ywamy hooka React.useState do przechowywania stanu naszego elementu (widoczny lub ukryty).
Domy┼Ťlnie element┬ájest ukryty. Aby zmieni─ç jego widoczno┼Ť─ç, tworzymy dwa przyciski, kt├│re po klikni─Öciu┬áwywo┼éuj─ů┬áfunkcj─Ö setVisible┬ázmieniaj─ůc argument visible na┬áwarto┼Ť─ç┬átrue┬á(aby nasz element by┼é widoczny) lub false┬á(aby go ukry─ç).

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(true)}>Wy┼Ťwietl</button>
      <button onClick={() => setVisible(false)}>Ukryj</button>
      {visible && <div>M├│j element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Alternative titles

  1. React - wy┼Ťwietlanie i ukrywanie elementów
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS (PL)

React - jak wy┼Ťwietli─ç lub ukry─ç element?
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join