freeCodeCamp

5.8 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036185	Use && for a More Concise Conditional	6	false		Используйте && для более сжатого условного

Description

Операторы if / else работали в последнем вызове, но есть более сжатый способ добиться того же результата. Представьте, что вы отслеживаете несколько условий в компоненте и хотите, чтобы различные элементы отображались в зависимости от каждого из этих условий. Если вы напишете много else if инструкции возвращают несколько разные пользовательские интерфейсы, вы можете повторить код, который оставляет место для ошибки. Вместо этого вы можете использовать && логический оператор для выполнения условной логики более кратким образом. Это возможно, потому что вы хотите проверить, является ли условие true , а если оно есть, верните некоторую разметку. Вот пример: {condition && <p>markup</p>} Если condition true , разметка будет возвращена. Если условие false , операция немедленно вернет значение false после оценки condition и ничего не вернет. Вы можете включить эти утверждения непосредственно в свои JSX и несколько разных условий вместе, написав && после каждого из них. Это позволяет обрабатывать более сложную условную логику в методе render() не повторяя много кода.

Instructions

Решить предыдущий пример еще раз, так что h1 оказывает только если display является true , но использовать && логический оператор вместо if/else заявление.

Tests

tests:
  - text: <code>MyComponent</code> должен существовать и визуализироваться.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length; })(), "<code>MyComponent</code> should exist and render.");'
  - text: 'Когда для <code>display</code> установлено значение <code>true</code> , необходимо <code>display</code> <code>div</code> , <code>button</code> и <code>h1</code> .'
    testString: '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(updated.find("div").length === 1 && updated.find("div").children().length === 2 && updated.find("button").length === 1 && updated.find("h1").length === 1, "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render."); }; '
  - text: 'Если для <code>display</code> установлено значение « <code>false</code> , нужно отобразить только <code>div</code> и <code>button</code> .'
    testString: '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(updated.find("div").length === 1 && updated.find("div").children().length === 1 && updated.find("button").length === 1 && updated.find("h1").length === 0, "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render."); }; '
  - text: Метод render должен использовать && логический оператор для проверки состояния this.state.display.
    testString: 'getUserInput => assert(getUserInput("index").includes("&&"), "The render method should use the && logical operator to check the condition of this.state.display.");'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: true
    }
    this.toggleDisplay = this.toggleDisplay.bind(this);
  }
  toggleDisplay() {
    this.setState({
      display: !this.state.display
    });
  }
  render() {
    // change code below this line
    return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

5.8 KiB Raw Blame History Unescape Escape