Как импортировать объект React: элементы через module.exports и отображать внутри компонента?

Я пытаюсь импортировать и визуализировать объект: свойство типа «элемент» 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>;

person sqwunckly    schedule 10.06.2017    source источник


Ответы (1)


Хм... разве ваш content.js не должен выглядеть так:

const text = <p>This element text is NOT rendered</p>;

module.exports = {
  firstColumn: text,
  secondColumn: "This text is rendered",
  thirdColumn: "This text is rendered",
}

переменная text не поднимается, поэтому вы экспортируете undefined как firstColumn.

person Krasimir    schedule 10.06.2017
comment
Привет, Красимир.. упс.. да, это исправлено! Спасибо. - person sqwunckly; 10.06.2017