if/else
语句的快捷方式。它们不像传统的if/else
语句那样健壮,但它们在React开发人员中非常受欢迎。这样做的一个原因是因为JSX是如何编译的, if/else
语句不能直接插入到JSX代码中。您可能已经注意到这几个挑战 - 当需要if/else
语句时,它总是在return
语句之外 。如果要在JSX中实现条件逻辑,三元表达式可能是一个很好的选择。回想一下,三元运算符有三个部分,但是你可以将几个三元表达式组合在一起。这是基本语法: 条件? expressionIfTrue:expressionIfFalse
CheckUserAge
组件的render()
方法中定义了三个常量。它们被称为buttonOne
, buttonTwo
和buttonThree
。每个都分配了一个表示按钮元素的简单JSX表达式。首先,使用input
和userAge
初始化CheckUserAge
的状态, userAge
其设置为空字符串的值。一旦组件向页面呈现信息,用户就应该有办法与它进行交互。在组件的return
语句中,设置一个实现以下逻辑的三元表达式:当页面首次加载时,将提交按钮buttonOne
呈现给页面。然后,当用户输入他们的年龄并单击该按钮时,根据年龄呈现不同的按钮。如果用户输入的数字小于18
,则渲染buttonThree
。如果用户输入的数字大于或等于18
,则渲染buttonTwo
。 CheckUserAge
组件应使用单个input
元素和单个button
元素进行渲染。
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("input").length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("button").length === 1, "The CheckUserAge
component should render with a single input
element and a single button
element.");'
- text: 应使用userAge
属性和input
属性初始化CheckUserAge
组件的状态,两者都设置为空字符串的值。
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === "" && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === "", "The CheckUserAge
component's state should be initialized with a property of userAge
and a property of input
, both set to a value of an empty string.");'
- text: 当CheckUserAge
组件首次呈现给DOM时, button
的内部文本应该是Submit。
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("button").text() === "Submit", "When the CheckUserAge
component is first rendered to the DOM, the button
's inner text should be Submit.");'
- text: 当进入一个数小于18 input
元件和button
被点击, button
的内部文本应该读You Shall Not Pass
。
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter3AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "3" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter17AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "17" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === "Submit" && userAge3 === "You Shall Not Pass" && userAge17 === "You Shall Not Pass", "When a number of less than 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You Shall Not Pass
."); }; '
- text: 当数大于或等于18输入到input
元件和button
被点击, button
的内部文本应该阅读You May Enter
。
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter35AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "35" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === "Submit" && userAge18 === "You May Enter" && userAge35 === "You May Enter", "When a number greater than or equal to 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You May Enter
."); }; '
- text: 一旦提交了一个数字,并再次更改了input
的值,该button
应返回到Submit
。
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "5" }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter10AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "10" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === "You May Enter" && changeInput1 === "Submit" && userAge10 === "You Shall Not Pass" && changeInput2 === "Submit", "Once a number has been submitted, and the value of the input
is once again changed, the button
should return to reading Submit
."); }; '
- text: 您的代码不应包含任何if/else
语句。
testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, "Your code should not contain any if/else
statements.");'
```