Я пытаюсь импортировать и визуализировать объект: свойство типа «элемент» React из внешнего файла и импортировать его с помощью module.exports в другой файл, содержащий компонент, и визуализировать его внутри компонента. Компонент ранее вызывался 3 раза, чтобы создать 3 столбца и заполнить их текстом.
Это работает при импорте «текста», однако я не могу заставить его работать при импорте «элемента» React.
Что мне нужно сделать, чтобы визуализировать импортированный «элемент» React? Я также использую css-модули. Ниже приведен код. Спасибо:-
(File: column.css)
.default {
box-sizing: border-box;
border: 1px solid black;
font-size: 20px;
width: 32%;
height: auto;
}
.red {
composes: default;
float: left;
margin-right: 2%;
background-color: red;
}
.green {
composes: default;
float: left;
background-color: green;
}
.blue {
composes: default;
float: right;
margin-left: 2%;
background-color: white;
}
(File: Home.js)
import React from 'react'
import Column from '../components/Column'
import styles from './home.css'
export default class Home extends React.Component {
render() {
return (
<div className={styles.container}>
<h1>Home</h1>
<Column style = {'red'} content={'firstColumn'}/>
<Column style = {'green'} content={'secondColumn'}/>
<Column style = {'blue'} content={'thirdColumn'}/>
</div>
)
}
}
(File: Column.js)
import React from 'react'
import style from './column.css'
const contents = require( '../components/content')
export default class Column extends React.Component {
render() {
return (
<div className={style[this.props.style]}>
{contents[this.props.content]}
</div>
)
}
}
(File: content.js)
import React from "react"
module.exports = {
firstColumn: text,
secondColumn: "This text is rendered",
thirdColumn: "This text is rendered",
}
const text = <p>This element text is NOT rendered</p>;