содержимое не отображается внутри MAIN, я не думаю, что это ошибка реакции, больше похоже на HTML

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

Это, вероятно, глупый вопрос, но все отрисовывалось и отображалось нормально в браузере, но когда я попытался добавить контент Внутри розового ОСНОВНОГО окна, ничего не появилось.

Это просто практика использования React CSS. Я думаю, что с MAIN что-то не так, но я не могу точно определить, что.

app.js:

app.js
Subcontents.js:

 import React, {Component} from 'react';
import styles from './Subcontents.module.css';

class Subcontents extends Component {
    render() {
        return <h3 className = {styles.subcontents}>Subcontents</h3>
    }
}

export default Subcontents;

Subcontents.module.css (игнорируйте соглашение об именовании, сейчас это не проблема):

 .subcontents{
background-color: purple;
padding-left: 5%;

}

Пожалуйста, сделайте этот ответ как можно более простым. Я все еще изучаю react.

Ответ №1:

После просмотра вашей песочницы кода вот что я нашел

Ваш Main компонент возвращает пустой h2 элемент, который заставляет React игнорировать все элементы, которые вы вставляете между тегами open и closing Main .

Чтобы исправить это, измените содержимое вашего Main компонента, чтобы оно было таким.

Main.js

                                    //Add this
return <h2 className={styles.main}>{this.props.children}</h2>;

Это приведет к тому, что React вернет все дочерние элементы, переданные в Main

PS Примечание с точки зрения семантики не представляется правильным переносить весь ваш контент внутрь h2 , что, по сути, вы и делаете, вставляя все свои элементы внутрь Main , просто примечание.