Задать вопрос
@nikitonik
Начинающий программист
react

Как с помощью props.children отобразить неупорядоченный список на экране?

Создайте компонент MyList, который будет отображать один неупорядоченный список на экране. Используйте MyList для отображения трех списков: первый должен содержать названия ваших любимых сериалов, второй фильм и третьи книги. Каждый список должен содержать как минимум три элемента. Используйте props.children для передачи имен компоненту.

Код HTML:
<html>
  <head></head>
  <body>
    <div id="root"></div>
  </body>
</html>

Код ReactJS:
import React from 'react';
import ReactDOM from 'react-dom';

class MyList extends React.Component {
    render() {
        return (
                this.props.children
        );
    }
}
ReactDOM.render(
    <MyList>
            <ul>
                <li>serial1</li>
                <li>serial2</li>
                <li>serial3</li>
            </ul>
            <ul>
                <li>film1</li>
                <li>film2</li>
                <li>film3</li>
            </ul>
            <ul>
                <li>book1</li>
                <li>book2</li>
                <li>book3</li>
            </ul>
    </MyList>,
    document.getElementById('root')
);

Выдает ошибку: You should set unordered list as MyList children 3 times
  • Вопрос задан
  • 142 просмотра
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
lazalu68
@lazalu68
Salmon
Раз "Создайте компонент MyList, который будет отображать один неупорядоченный список на экране", то может быть всё таки речь о том, чтоб было как-то так?:
return 
    <ul>
    { props.children }
    </ul>
...

<MyList>
	<li>serial1</li>
	<li>serial2</li>
	<li>serial3</li>
</MyList>
<MyList>
	<li>film1</li>
	<li>film2</li>
	<li>film3</li>
</MyList>
<MyList>
	<li>book1</li>
	<li>book2</li>
	<li>book3</li>
</MyList>
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Senior React Developer
DARS • Москва
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Провести ряд улучшений сайта на Тильде по видео-тз
26 апр. 2024, в 16:20
4000 руб./за проект
Написать приложение калькулятор заказа материла ios + android (опция)
26 апр. 2024, в 15:30
100000 руб./за проект
Поддержка сервиса по рассылкам
26 апр. 2024, в 15:12
30000 руб./за проект
Ещё заказы