4.1 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403616f	Ripasso dell'uso delle Props con componenti funzionali senza stato	6	301411	review-using-props-with-stateless-functional-components

--description--

Fatta eccezione per l'ultima sfida, hai sempre passato le props a componenti funzionali senza stato. Questi componenti agiscono come funzioni pure. Accettano le props come input e restituiscono la stessa vista ogni volta che vengono passate le stesse proprietà. Potresti chiederti cosa sia lo stato e la prossima sfida lo spiegherà con maggiore dettaglio. Prima però, ecco un ripasso della terminologia per i componenti.

Un componente funzionale senza stato è una qualsiasi funzione che accetta props e restituisce JSX. Un componente senza stato, d'altra parte, è una classe che estende React.Component, ma non utilizza lo stato interno (coperto nella prossima sfida). Infine, un componente stateful è un componente di classe che mantiene il proprio stato interno. Spesso si fa riferimento ai componenti stateful chiamandoli semplicemente componenti o componenti React.

Un modello comune è quello di cercare di minimizzare l'estensione dello stato e di creare componenti funzionali senza stato, laddove possibile. Questo aiuta a contenere la gestione dello stato in un'area specifica della tua applicazione. A sua volta, questo migliora lo sviluppo e la manutenzione della tua app rendendo più facile seguire come le modifiche allo stato influenzano il suo comportamento.

--instructions--

L'editor di codice ha un componente CampSite che presenta un componente Camper come figlio. Definisci il componente Camper e assegnagli la proprietà di default { name: 'CamperBot' }. All'interno del componente Camper, presenta il codice che vuoi, ma assicurati di avere un elemento p che include solo il valore del name che viene passato come prop. Infine, definisci propTypes nel componente Camper in modo che richieda che name venga fornito come prop verificando che sia di tipo string.

--hints--

Il componente CampSite dovrebbe effettuare il render.

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

Il componente Camper dovrebbe effettuare il render.

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

Il componente Camper dovrebbe includere delle props predefinite che assegnano la stringa CamperBot alla chiave name.

assert(
  /Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(
    __helpers.removeWhiteSpace(code)
  )
);

Il componente Camper dovrebbe includere tipi di prop che richiedono che la proprietà name sia di tipo string.

assert(
  /Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(
    __helpers.removeWhiteSpace(code)
  )
);

Il componente Camper dovrebbe contenere un elemento p che abbia come unico testo la proprietà name.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
    return (
      mockedComponent.find('p').text() ===
      mockedComponent.find('Camper').props().name
    );
  })()
);

--seed--

--before-user-code--

var PropTypes = {
   string: { isRequired: true }
};

--after-user-code--

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

--seed-contents--

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// Change code below this line

--solutions--

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// Change code below this line

const Camper = (props) => {
   return (
     <div>
       <p>{props.name}</p>
     </div>
   );
};

Camper.propTypes = {
  name: PropTypes.string.isRequired
};

Camper.defaultProps = {
  name: 'CamperBot'
};

4.1 KiB Raw Blame History