Задать вопрос
@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
  • Вопрос задан
  • 144 просмотра
Комментировать
Подписаться 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 Native разработчик
Студия 15
от 200 000 до 250 000 ₽
React Native Developer
Wanted. • Санкт-Петербург
До 300 000 ₽
React Native developer (+Node.js)
CTRL+ • Москва
от 250 000 до 320 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать несколько гиф анимаций
22 нояб. 2024, в 21:47
3000 руб./за проект
Доделать сайт на Revolution 3
22 нояб. 2024, в 21:44
50000 руб./за проект
Анализ и оценка проектов, с последующим запуском
22 нояб. 2024, в 20:20
1000 руб./в час
Ещё заказы