Reactオブジェクトをインポートする方法：module.exports経由で要素をレンダリングし、コンポーネント内部でレンダリングしますか？

Question

外部ファイルからReact 'element'というオブジェクトのプロパティをインポートしてレンダリングしようとしています。これをmodule.exportsを使用してComponentを含む別のファイルにインポートし、Component内でレンダリングしています。コンポーネントは以前は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>; 

Answer 1

フム...いけない、あなたのcontent.jsは、次のようになります。あなたはfirstColumnとしてundefinedを輸出しているので、

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変数が掲揚されていません。