Diskuze: React přiřazení komponenty k body

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

Vojta Korduliak

Člen

Vojta Korduliak:11.2.2020 12:58

Ahoj,
chtěl bych docílit toho, že když uživatel klikne na určitý button, tak se spustí metoda a ta metoda by měla vytvořit lightbox, respektive appendnout div s formulářem k body.

Zkusil jsem:

const form = <OpenForm />
body.appendChild(form);

konkrétně se snažím dosáhnout tohoto, ale vyhazuje mi to neustále error, že "form" není "node". Nějaký nápad jak to udělat prosím? Jak konvertovat komponentu na DOM?

Děkuji za pomoc.

Editováno 11.2.2020 13:00

Odpovědět

11.2.2020 12:58

Peter Mlich

Člen

Peter Mlich:11.2.2020 14:03

Neznam react. Znam js. Co jsi nasel googlem?

<div id="xxx"></div>
<input type="button" value="kilkni na mne vicekrat" onclick="aaa();">
<script>
function aaa()
{
var el;
el = document.getElementById('xxx');
el.innerHTML += 'a';
}
</script>

https://jsfiddle.net/sw32jgc9/
Vpravo dole, kdyz budes klikat na tlacitko, bude do tagu DIV pomoci metody innerHTML pridavat text.
Predpokladam, ze chces nejak podobne pracovat s tagy i ty.

google = react get tag element
https://stackoverflow.com/…eact-element

var Child = React.createClass({
  render: function() {
    return <div ref={function(el){this.props.whatElementAmI(el)}.bind(this)} >Oh My!</div>
  }
});

var Parent = React.createClass({
  whatElementAmI: function(el) {
    console.log(el.nodeName); // "DIV"
  },
  render: function() {
    return <div><Child whatElementAmI={this.whatElementAmI.bind(this)} /></div>
  }
});

Nahoru Odpovědět

11.2.2020 14:03

Peter Mlich

Člen

Peter Mlich:11.2.2020 14:04

import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  render() {
    return <span>Hello</span>;
  }
}

class Container extends React.Component {
  componentDidMount() {
    var domNode = ReactDOM.findDOMNode(this._component);
    console.log(domNode.tagName); // "DIV"
  }
  render() {
    return <MyComponent ref={(c) => this._component = c} />
  }
}
//na teze strance

Nahoru Odpovědět

11.2.2020 14:04

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.2.2020 14:32

Když používáš React nemáš vůbec důvod manuálně modifikovat DOM.
Správný způsob je ten, že na kliknutí se vyvolá update v dostatečně nadřazené komponentě a ten změní stav této komponenty. Při příštím renderu se podle stavu rozhodneš vyrenderovat svůj lightbox, prompt nebo formulář.

V tomhle případě se o to asi postará jedna z hlavních komponent aplikace.

Takže klíčová slova: onClick, setState...

PS: Reacti elementy nejsou typu DOM Node. Doporučuju začít v oficiální dokumentaci Reactu a projít si úplný základ - render a update a controlled a uncontrolled components.

Editováno 11.2.2020 14:33

Nahoru Odpovědět

11.2.2020 14:32

Neaktivní uživatelský účet

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.

Nejčastěji vyhledáváné

Diskuze: React přiřazení komponenty k body