3.5 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036164	Creare un componente con una composizione	6	301383	create-a-component-with-composition

--description--

Ora esamineremo come possiamo mettere insieme più componenti React. Immagina di costruire un'app e di aver creato tre componenti: una Navbar, una Dashboard e un Footer.

Per mettere insieme questi componenti, è possibile creare un componente App genitore che fa il render di ciascuno di questi tre componenti come figli. Per fare il render di un componente come figlio in un componente React, devi includere il nome del componente scritto come tag HTML personalizzato nel file JSX. Ad esempio, nel metodo render puoi scrivere:

return (
 <App>
  <Navbar />
  <Dashboard />
  <Footer />
 </App>
)

Quando React incontra un tag HTML personalizzato che fa riferimento ad un altro componente (un nome componente inserito in < /> come in questo esempio), visualizza il markup per quel componente nella posizione del tag. Questo dovrebbe illustrare la relazione genitore/figlio tra il componente App e la Navbar, la Dashboard, e il Footer.

--instructions--

Nell'editor di codice, c'è un semplice componente funzionale chiamato ChildComponent e un componente di classe chiamato ParentComponent. Componi i due insieme facendo il render del ChildComponent all'interno del ParentComponent. Assicurati di chiudere il tag ChildComponent con una barra in avanti (/).

Nota: ChildComponent è definito con una funzione freccia ES6 perché questa è una pratica molto comune quando si utilizza React. Tuttavia, sappi che questa è solo una funzione. Se non hai familiarità con la sintassi delle funzioni freccia, fai riferimento alla sezione JavaScript.

--hints--

Il componente React dovrebbe restituire un singolo elemento div.

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.type() === 'div';
  })()
);

Il componente dovrebbe restituire due elementi annidati.

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.children().length === 2;
  })()
);

Il componente dovrebbe restituire il componente ChildComponent come secondo figlio.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ParentComponent));
    return (
      mockedComponent.find('ParentComponent').find('ChildComponent').length ===
      1
    );
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<ParentComponent />, document.getElementById('root'))

--seed-contents--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }


        { /* Change code above this line */ }
      </div>
    );
  }
};

--solutions--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }
        <ChildComponent />
        { /* Change code above this line */ }
      </div>
    );
  }
};

3.5 KiB Raw Blame History