4.9 KiB
4.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d403617a | Pass State as Props to Child Components | 6 | false | Passar o estado como adereços aos componentes filhos |
Description
state
importante para o seu aplicativo, que renderiza os componentes filhos. Você deseja que esses componentes tenham acesso a algumas partes desse state
, que são passadas como adereços. Por exemplo, talvez você tenha um componente de App
que renderize uma Navbar
, entre outros componentes. Em seu App
, você tem um state
que contém muitas informações do usuário, mas a Navbar
só precisa acessar o nome de usuário do usuário para poder exibi-lo. Você passa esse pedaço de state
para o componente Navbar
como um prop. Esse padrão ilustra alguns paradigmas importantes no React. O primeiro é o fluxo de dados unidirecional . O estado flui em uma direção para baixo da árvore dos componentes do seu aplicativo, do componente pai com preservação de estado para componentes filhos. Os componentes filho recebem apenas os dados de estado necessários. A segunda é que os aplicativos stateful complexos podem ser divididos em apenas alguns, ou talvez um único componente com estado. O resto de seus componentes simplesmente recebe o estado do pai como props e renderiza uma UI daquele estado. Ele começa a criar uma separação em que o gerenciamento de estado é tratado em uma parte do código e a renderização da UI em outra. Este princípio de separar a lógica de estado da lógica da IU é um dos princípios-chave da React. Quando é usado corretamente, facilita muito o gerenciamento de projetos de aplicativos complexos e com monitoração de estado. Instructions
MyApp
é stateful e renderiza um componente Navbar
como um filho. Passe a propriedade name
em seu state
até o componente filho e, em seguida, mostre o name
na tag h1
que faz parte do método de renderização Navbar
. Tests
tests:
- text: O componente <code>MyApp</code> deve renderizar com um componente <code>Navbar</code> dentro.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1 && mockedComponent.find("Navbar").length === 1; })(), "The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.");'
- text: O componente <code>Navbar</code> deve receber o <code>name</code> propriedade do estado <code>MyApp</code> como props.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").props() )}; const navProps = await setState(); assert(navProps.name === "TestName", "The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props."); }; '
- text: O elemento <code>h1</code> na <code>Navbar</code> deve renderizar o <code>name</code> prop.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find("Navbar").find("h1").text(); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").find("h1").text() )}; const navH1After = await setState(); assert(new RegExp("TestName").test(navH1After) && navH1After !== navH1Before, "The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop."); }; '
Challenge Seed
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'CamperBot'
}
}
render() {
return (
<div>
<Navbar /* your code here */ />
</div>
);
}
};
class Navbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Hello, my name is: /* your code here */ </h1>
</div>
);
}
};
After Test
console.info('after the test');
Solution
// solution required