Modern Full-Stack Development

Feedback and Status: ControlArea.tsx

Download 5,64 Mb.

Pdf ko'rish

bet	72/107
Sana	06.08.2021
Hajmi	5,64 Mb.
	#140576

1 ... 68 69 70 71 72 73 74 75 ... 107

Bog'liq
Modern Full-Stack Development Using TypeScript, React, Node

);
Hopefully you see the problem: you’ll hit a compiler warning (or error, depending on
settings) because you’re trying to return multiple items from render() (remember that
render() is implicit when using the functional approach to components like this). If you
try to wrap all the

Download 5,64 Mb.

Do'stlaringiz bilan baham:

Feedback and Status: ControlArea.tsx The ControlArea component is the area in the upper right-hand corner where the scores are displayed, as well as messages at various points in the lifecycle of the game. It’s not at all complex, but it does introduce a new React concept: const ControlArea = ({ state }: any) => ( What’s that React.Fragment about? Well, as you’ll recall, the render() method must always return a single component. That component can, of course, have as many children as you like, but ultimately, it’s a single top-level component being returned. But what happens when what you really need to return is a list of components? You’re going to have to find some component to be its parent. While that’s often easy (and there are frequently many choices, with being very common), wouldn’t it be nice if you could return a list of components without adding extra nodes to the DOM? Because remember, that’s what’s going to happen when you return a component: HTML will be produced and added to the DOM. And sometimes, it won’t be so simple: remember that each component you add to the hierarchy has a render() method, and all of them must return a single component. Chapter 11 time for fun: BattleJong, the Client 317 To illustrate this, imagine you were trying to render a plain old HTML table, and you create a Table component along with a TableHeader component for the header that you nested under your Table component. HTML tables usually have multiple headers for the columns, so the TableHeader component might be something like const TableHeader = () => (	Column 1	Column 2	Column 3	elements in a , that would solve the compiler issue, but it will result in invalid HTML because isn’t valid at that point in a table. So, that’s not a good solution. That’s where React.Fragment comes in. It acts as a parent component, but unlike (and most other components), it doesn’t output any HTML itself. It’s strictly a container for children. In this case, I have a list of elements, as well as some elements that I want to return, and essentially, it’s just a list of such elements, all at the same level in the hierarchy. Using React.Fragment here makes a lot of sense. Scores Here's the first batch of children that go inside the React.Fragment: Your score: {state.scores.player} Opponent score: {state.scores.opponent} Chapter 11 time for fun: BattleJong, the Client 318 The two scores use a total of four elements, two for each label and two for each actual score. The labels are floated left and given a specific width so that the elements that follow them, where the scores are, will be lined up nicely. The scores come from state, of course, and specifically the scores property. But we’ll get to that later.

1 ... 68 69 70 71 72 73 74 75 ... 107