Files

camperbot 0473dedf47 chore(i18n,curriculum): processed translations - new ukrainian (#44447 )

2021-12-10 11:14:24 +05:30

10 KiB

Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036187	Використовуйте трикомпонентний вираз для умовної візуалізації	6	301414	use-a-ternary-expression-for-conditional-rendering

--description--

Перед переходом до техніки динамічного малювання, існує останній спосіб використання вбудованих умов JavaScript для відображення вашого бажання: Зовнішній оператор. Зовнішній оператор часто використовується як ярлик для тверджень if/else у JavaScript. Вони не такі надійні, як традиційні if/else, але вони дуже популярні серед розробників React. Причиною цього є те, що компілювання JSX операційної системи if/else операторів не можна вставляти безпосередньо в код JSX. Можливо, ви помітили це раніше — коли потрібен оператор if/else, він завжди був поза ключовим словом return. Трикомпонентні вирази можуть бути чудовою альтернативою, якщо ви хочете реалізувати умовну логіку в межах вашої JSX. Нагадаємо, що трикомпонентний оператор має три частини, але ви можете поєднати декілька трикомпонентних вирази разом. Ось тут основний синтаксис:

condition ? expressionIfTrue : expressionIfFalse;

--instructions--

Редактор коду має три константи, визначені в межах методу CheckUserAge component's render(). Вони називаються buttonOne, buttonTwo, і buttonThree. Кожному із них призначено простий вираз JSX, що представляє елемент кнопки. Спочатку ініціалізувати стан CheckUserAge з input і userAge, обидва задані значенням пустого рядка.

Як тільки компонент відображає інформацію на сторінці, користувачі повинні мати спосіб взаємодіяти з нею. У межах return компонента, встановіть трикомпонентний вираз, який реалізує наступну логіку: коли сторінка вперше завантажується, відобразити кнопку підтвердження, buttonOne на сторінці. Потім, коли користувач введе свій вік та натисне кнопку, відобразіть іншу кнопку з урахуванням віку. Якщо користувач вводить число менше за 18, відобразіть buttonThree. Якщо користувач вводить число більше або рівне 18, відобразіть buttonTwo.

--hints--

Компонент CheckUserAge має візуалізувати один елемент input і один елемент button.

assert(
  Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input')
    .length === 1 &&
    Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button')
      .length === 1
);

Стан компонента CheckUserAge слід ініціалізувати з властивістю userAge і властивістю input, котрі обидва встановлюють значення пустого рядка.

assert(
  Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' &&
    Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === ''
);

Коли компонент CheckUserAge першим візуалізовано в DOM, то текст button має бути Submit.

assert(
  Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() ===
    'Submit'
);

Коли вводиться число менше 18 в input і натискається button, внутрішній текст button має бути You Shall Not Pass.

(() => {
  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');
    mockedComponent.update();
    return mockedComponent.find('button').text();
  };
  const enter17AndClickButton = () => {
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: '17' } });
    mockedComponent.find('button').simulate('click');
    mockedComponent.update();
    return mockedComponent.find('button').text();
  };
  const userAge3 = enter3AndClickButton();
  const userAge17 = enter17AndClickButton();
  assert(
    initialButton === 'Submit' &&
      userAge3 === 'You Shall Not Pass' &&
      userAge17 === 'You Shall Not Pass'
  );
})();

Коли вводиться число більше або рівне 18-и в input і натискається button, внутрішній текст button має бути You May Enter.

(() => {
  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');
    mockedComponent.update();
    return mockedComponent.find('button').text();
  };
  const enter35AndClickButton = () => {
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: '35' } });
    mockedComponent.find('button').simulate('click');
    mockedComponent.update();
    return mockedComponent.find('button').text();
  };
  const userAge18 = enter18AndClickButton();
  const userAge35 = enter35AndClickButton();
  assert(
    initialButton === 'Submit' &&
      userAge18 === 'You May Enter' &&
      userAge35 === 'You May Enter'
  );
})();

Після того, як число було прийнято, і значення input знову змінилося, текст button повинен повернутися до Submit.

(() => {
  const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
  const enter18AndClickButton = () => {
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: '18' } });
    mockedComponent.find('button').simulate('click');
    mockedComponent.update();
    return mockedComponent.find('button').text();
  };
  const changeInputDontClickButton = () => {
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: '5' } });
    mockedComponent.update();
    return mockedComponent.find('button').text();
  };
  const enter10AndClickButton = () => {
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: '10' } });
    mockedComponent.find('button').simulate('click');
    mockedComponent.update();
    return mockedComponent.find('button').text();
  };
  const userAge18 = enter18AndClickButton();
  const changeInput1 = changeInputDontClickButton();
  const userAge10 = enter10AndClickButton();
  const changeInput2 = changeInputDontClickButton();
  assert(
    userAge18 === 'You May Enter' &&
      changeInput1 === 'Submit' &&
      userAge10 === 'You Shall Not Pass' &&
      changeInput2 === 'Submit'
  );
})();

Ваш код не повинен містити конструкцій if/else.

assert(
  new RegExp(/(\s|;)if(\s|\()/).test(
    Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
  ) === false
);

--seed--

--after-user-code--

ReactDOM.render(<CheckUserAge />, document.getElementById('root'));

--seed-contents--

const inputStyle = {
  width: 235,
  margin: 5
};

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    // Change code below this line

    // Change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState(state => ({
      userAge: state.input
    }));
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type='number'
          value={this.state.input}
          onChange={this.handleChange}
        />
        <br />
        {/* Change code below this line */}

        {/* Change code above this line */}
      </div>
    );
  }
}

--solutions--

const inputStyle = {
  width: 235,
  margin: 5
};

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userAge: '',
      input: ''
    };
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState(state => ({
      userAge: state.input
    }));
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type='number'
          value={this.state.input}
          onChange={this.handleChange}
        />
        <br />
        {this.state.userAge === ''
          ? buttonOne
          : this.state.userAge >= 18
          ? buttonTwo
          : buttonThree}
      </div>
    );
  }
}

10 KiB Raw Permalink Blame History Unescape Escape