freeCodeCamp/curriculum/challenges/chinese/03-front-end-libraries/react/render-with-an-if-else-condition.md

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
5a24c314108439a4d4036184	使用 If-Else 条件进行渲染	6	301410

--description--

使用 JavaScript 控制渲染视图的另一个应用是将渲染的元素绑定到一个条件。当条件为真时，将呈现一个视图，反之，则呈现另一种视图。你可以在 React 组件的render()方法中使用的标准if/else语句来实现这一点。

--instructions--

MyComponent 的 state 中包含一个布尔值，用于跟踪是否要在 UI 中显示某个元素。按钮切换此值的状态。目前，它每次都呈现相同的 UI。用if/else语句重写render()方法，如果display为true则返回当前标记。否则，返回不带h1元素的标记。

注意： 写if/else语句才能通过测试，使用三元运算符是不会通过的。

--hints--

MyComponent应该存在并被渲染。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    return mockedComponent.find('MyComponent').length === 1;
  })()
);

当display被设置为true时，div、button和h1标签应该被渲染。

async () => {
  const waitForIt = (fn) =>
    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
  const state_1 = () => {
    mockedComponent.setState({ display: true });
    return waitForIt(() => mockedComponent);
  };
  const updated = await state_1();
  assert(
    mockedComponent.find('div').length === 1 &&
      mockedComponent.find('div').children().length === 2 &&
      mockedComponent.find('button').length === 1 &&
      mockedComponent.find('h1').length === 1
  );
};

当display被设置为false时，只有div和button应该被渲染。

async () => {
  const waitForIt = (fn) =>
    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
  const state_1 = () => {
    mockedComponent.setState({ display: false });
    return waitForIt(() => mockedComponent);
  };
  const updated = await state_1();
  assert(
    mockedComponent.find('div').length === 1 &&
      mockedComponent.find('div').children().length === 1 &&
      mockedComponent.find('button').length === 1 &&
      mockedComponent.find('h1').length === 0
  );
};

render 方法中应该使用if/else语句来检查this.state.display的条件。

(getUserInput) =>
  assert(
    getUserInput('index').includes('if') &&
      getUserInput('index').includes('else')
  );

--solutions--