Comment importer objet React: éléments via module.exports et rendre dans le composant?

Question

J'essaie d'importer et de rendre un objet: propriété de type Réagir 'élément' du fichier externe et l'importer en utilisant module.exports dans un autre fichier contenant un composant et le rendre dans le composant. Le composant a déjà été appelé 3 fois, pour créer 3 colonnes et les remplir avec du texte.

Cela fonctionne lors de l'importation de 'texte' mais je n'arrive pas à faire fonctionner l'importation d'un 'élément' React.

Que dois-je faire pour rendre l'élément React importé? J'utilise aussi des css-modules. Voici le code. Merci: -

(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

Hm ... ne devrait pas votre content.js ressemble:

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

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

la variable text n'est pas hissée si vous exportez undefined comme firstColumn.