Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Swiftu. Zároveň využij výhodnou slevovou akci až 30 % zdarma při nákupu e-learningu - více informací.
discount 30 + hiring

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

Aktivity
Avatar
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
Avatar
Peter Mlich
Člen
Avatar
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
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
Avatar
Taskkill
Tvůrce
Avatar
Taskkill: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
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.