今天，在React培训课程的翻译的第十部分中，我们建议您完成使用组件属性及其样式的实际任务。
→
第1部分：课程概述，React，ReactDOM和JSX普及的原因→
第2部分：功能组件→
第3部分：组件文件，项目结构→
第4部分：父级和子级组件→
第5部分：TODO应用程序的开始工作，样式设计的基础→
第6部分：关于本课程的一些功能，JSX和JavaScript→
第7部分：内联样式→
第8部分：继续研究TODO应用程序，熟悉组件的属性→
第9部分：组件属性→
第10部分：使用组件特性和样式的研讨会→
第11部分：动态标记生成和映射数组方法→
第12部分：研讨会，TODO应用程序的第三阶段工作→
第13部分：基于类的组件→
第14部分：关于基于类的组件，组件状态的研讨会→
第15部分：组件健康研讨会→
第16部分：TODO应用程序的第四阶段工作，事件处理→
第17部分：TODO应用程序的第五阶段工作，修改组件的状态→
第18部分：TODO应用程序的第六阶段工作→
第19部分：组件生命周期方法第20部分：条件渲染的第一课→
第21部分：关于条件渲染的第二课和研讨会→
第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据→
第23部分：关于使用表格的第一课→
第24部分：第二形式课→
第25部分：使用表单的研讨会→
第26部分：应用程序体系结构，容器/组件模式→
第27部分：课程项目第20课。 组件属性，样式
→
原创▍工作
- 创建一个新的React应用程序项目。
- 在应用程序页面上显示App组件，其代码应在单独的文件中。
- App组件应输出5个包含笑话的
Joke组件。 将这些组件以您想要的方式带出。 - 每个
Joke组件都应接受并处理笑话主体的question属性，及其关键短语的punchLine属性。
▍其他任务
一些笑话完全由关键词组成。 例如：“很难将双关语解释为窃窃私语，因为它们总是从字面上理解。” 考虑如果未设置
question属性，则
Joke组件如何仅显示
punchLine给它的
punchLine属性。 尝试对组件进行样式设计。
▍解决方案
主要任务
index.js文件将看起来非常熟悉：
import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />, document.getElementById("root"))
这是
App.js文件的代码：
import React from "react" import Joke from "./Joke" function App() { return ( <div> <Joke question="What's the best thing about Switzerland?" punchLine="I don't know, but the flag is a big plus!" /> <Joke question="Did you hear about the mathematician who's afraid of negative numbers?" punchLine="He'll stop at nothing to avoid them!" /> <Joke question="Hear about the new restaurant called Karma?" punchLine="There's no menu: You get what you deserve." /> <Joke question="Did you hear about the actor who fell through the floorboards?" punchLine="He was just going through a stage." /> <Joke question="Did you hear about the claustrophobic astronaut?" punchLine="He just needed a little space." /> </div> ) } export default App
请注意，由于
Joke组件文件与
App组件文件位于同一文件夹中，因此我们使用
import Joke from "./Joke"的
import Joke from "./Joke"将其
import Joke from "./Joke" 。 我们从
App返回了几个元素，因此我们需要将所有输出包装在某个标签中，例如，在
<div> 。 我们将
question和
punchLine传递给组件实例。
这是
Joke.js文件的代码：
import React from "react" function Joke(props) { return ( <div> <h3>Question: {props.question}</h3> <h3>Answer: {props.punchLine}</h3> <hr/> </div> ) } export default Joke
在这里，当声明
Joke函数时，我们指定
props参数。 回想一下，根据既定传统使用的就是这样的名称。 实际上，它可以是任何东西，但最好称它为
props 。
我们从组件返回几个元素-因此，它们包含在
<div> 。 使用
props.question和
props.punchLine我们可以访问在创建组件实例时传递给组件实例的属性。 这些属性成为
props对象的属性。 由于必须将JSX标记中使用的JavaScript代码括在大括号中，因此将它们括在大括号中。 否则，系统会将变量名称视为纯文本。 在一对
<h3>元素之后，在其中一个显示了笑话的主要文本，在另一个-它的关键字中，有一个
<hr/>元素描述了水平线。 这些笑话将在每次玩笑后显示，将它们分开。
这就是VSCode中的应用程序项目。
VSCode中的应用这是应用程序页面。
浏览器中的应用程序页面附加任务
回想一下，附加任务的主要目标是组织笑话的正确结论，这完全由一个关键短语组成。 这体现在以下事实中：创建
Joke组件的实例时，仅将
punchLine属性
punchLine ，而没有传递
question属性。 创建此类组件的实例如下所示：
<Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." />
如果将此代码放在
App组件返回的代码的顶部，则应用程序页面将如下所示。
申请页面格式不正确显然，这里的问题是，尽管没有将
question属性传递给组件，但它显示了每个笑话主要部分之前的文本，之后没有任何输出。
展望未来，我们注意到在本课程的未来部分中，我们将讨论条件渲染。 使用这种渲染方法，您可以有效地解决像我们这样的问题。 同时，我们将尝试使用页面样式。 即，我们将确保如果
question属性未传递到组件，则由它返回的JSX标记的相应片段将不会显示在页面上。 这是
Joke组件的完整代码，实现了使用CSS解决问题的一种可能方法：
import React from "react" function Joke(props) { return ( <div> <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3> <h3>Answer: {props.punchLine}</h3> <hr/> </div> ) } export default Joke
我们为第一个元素
<h3>分配
<h3>样式，该样式是根据对象中
props.question属性的存在在组件实例化期间确定的。 如果此属性在对象中，则该元素采用
display: block样式，并显示在页面上；如果不是，则
display: none ，并且不显示在页面上。 使用这种构造将产生相同的效果：
<h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>
在这里，如果
props对象
props question属性，则
display: none样式不会分配给元素，否则，不会将
display: none样式分配给
display属性。
现在，浏览器中的应用程序页面将如下所示。
未将问题属性传递给它的情况的正确组件处理您可能会注意到，
Joke组件形成的所有元素看起来都是相同的。 让我们考虑如何选择仅通过
punchLine属性的那些。 我们将使用内置样式以及我们上面研究的方法来解决此问题。 这是
Joke组件的更新代码：
import React from "react" function Joke(props) { return ( <div> <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3> <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3> <hr/> </div> ) } export default Joke
这就是现在出现在应用程序页面上的内容。
造型与其他商品不同的商品现在，我们已经在处理
Joke组件，它变得更加通用，更适合重用。
总结
在本实践课程中，我们正在开发将属性传递到组件的技能。 如果在这里给出的示例中分析代码，您会注意到，为了输出几个相似的标记块，您必须不断编写重复的JSX代码片段。 在下一课中，我们将讨论如何在使用标准JavaScript工具的同时将标记和数据分离的同时自动形成这种页面。
亲爱的读者们！ 如果您对本研讨会的问题的解决方案与所建议的解决方案不同，请告诉我们。