3.5 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d403616e | Accedere alle proprietà utilizzando this.props | 6 | 301375 | access-props-using-this-props |
--description--
Le ultime sfide hanno mostrato i modi fondamentali per passare le proprietà ai componenti figli. Ma cosa succede se il componente figlio a cui stai passando una prop è un componente di classe ES6, piuttosto che un componente funzionale senza stato? Il componente di classe ES6 utilizza una convenzione leggermente diversa per accedere alle proprietà.
Ogni volta che fai riferimento a un componente di classe all'interno di sé stesso, usa la parola chiave this
. Per accedere alle proprietà all'interno di un componente di classe, premetti this
al codice che usi per accedervi. Ad esempio, se un componente di classe ES6 ha una prop chiamata data
, scriverai {this.props.data}
in JSX.
--instructions--
Mostra un'istanza del componente Welcome
nel componente genitore App
. Qui, dai a Welcome
una proprietà di name
e assegnale il valore di una stringa. Dentro il componente figlio, Welcome
, accedi alla proprietà name
dentro le tag strong
.
--hints--
Il componente App
dovrebbe restituire un singolo elemento div
.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.children().type() === 'div';
})()
);
Il figlio di App
dovrebbe essere il componente Welcome
.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.children().childAt(0).name() === 'Welcome'
);
})()
);
Il componente Welcome
dovrebbe avere una prop chiamata name
.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.find('Welcome').props().name;
})()
);
Il componente Welcome
dovrebbe visualizzare la stringa che crei come prop name
all'interno dei tag strong
.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.find('strong').text() ===
mockedComponent.find('Welcome').props().name
);
})()
);
--seed--
--after-user-code--
ReactDOM.render(<App />, document.getElementById('root'))
--seed-contents--
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<Welcome />
{ /* Change code above this line */ }
</div>
);
}
};
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<p>Hello, <strong></strong>!</p>
{ /* Change code above this line */ }
</div>
);
}
};
--solutions--
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<p>Hello, <strong>{this.props.name}</strong>!</p>
{ /* Change code above this line */ }
</div>
);
}
};
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<Welcome name="Quincy"/>
{ /* Change code above this line */ }
</div>
);
}
};