Tepki bileşenini

Question

dizgisine dönüştürürken hatayla karşılaşıyorum Birkaç aydır tepkiyle çalışıyorum ve sunucu tarafı oluşturma işlemini başarıyla gerçekleştiriyorum. Son zamanlarda ES6 + Babel ile kişisel bir uygulamayı yeniden yazmaya başladım. Bir tepki bileşende renderToString() çalıştırmayı denediğinizde bu hatayı alıyorum:

renderToString(): You must pass a valid ReactElement.

bazı kod

bileşen

import React from 'react'; 
import ReactDOM from 'react-dom'; 


export class InfoBox extends React.Component { 
    render() { 
     return (
      <div> 
       <div className='info-box'> 
        Hello 
       </div> 
      </div> 
     ); 
    } 
} 

if(typeof window !== 'undefined') { 
    ReactDOM.render(<InfoBox/>, document.getElementById('info-box-mount-point')); 
} 

ekspres endeks rota

import express from 'express'; 
import React from 'react'; 
import ReactDom from 'react-dom/server'; 
import InfoBox from '../react-components/info-box/info-box.jsx'; 

let router = express.Router(); 
let InfoBoxFactory = React.createFactory(InfoBox); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index', { 
     reacthtml: ReactDom.renderToString(InfoBoxFactory) 
    }); 
}); 

module.exports = router; 

Başka bir soru: Bileşenleri .jsx veya .js olarak mı kaydetmeliyim? Eğer info-box.jsx ithal sınıfını InfoBox ihtiyaç Bu durumda

Answer 1

(ben html için bileşenin hale yönteminde jsx kullanıyorum) çünkü info-box.jsx hiçbir default export

import { InfoBox } from '../react-components/info-box/info-box.jsx'; 
     ^^^  ^^^ 

veya info-box.jsx için default eklemek yoktur ,

export default class InfoBox extends React.Component {} 
     ^^^^^^^ 

Güncelleme:

Sen createFactory kullanmaktan kaçınmak ve sadece yardım için, teşekkürler görebilmeniz

ReactDom.renderToString(<InfoBox />)