Bir React uygulamasının yapı sistemi olmayan farklı JS dosyalarında bileşenleri olabilir mi?

Tepki örnekleri, gulp, Grunt veya npm ve Browserify veya Webpack kullanır. Aşağıdaki kodda bunlar olmadan bir React uygulaması var ve sadece bu son adımın mümkün olup olmadığını merak ediyorum. İşteBir React uygulamasının yapı sistemi olmayan farklı JS dosyalarında bileşenleri olabilir mi?

<!DOCTYPE html> 
 
<html> 
 
<head><meta charset="utf-8"></head> 
 
<body> 
 
    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script> 
 
    <script type="text/babel" src="js/App.js"></script> 
 
</body> 
 
</html>

App.js

'use strict'; 
 
var { 
 
    Component 
 
} = React; 
 
class Hdr extends Component { 
 
    render() { 
 
    return (<header className="container">Header</header>); 
 
    } 
 
}; 
 

 
class App extends Component { 
 
    render() { 
 
    return (
 
     <main> 
 
     <Hdr /> 
 
     </main> 
 
    ); 
 
    } 
 
}; 
 
ReactDOM.render(<App />, document.body);

geçerli: çeker

Bir HTML sayfası, babil-tarayıcı ve dosya JavaScript birini Tepki 10

App bileşeni, Hdr bileşenini çeker. İşte soru: Hdr'u ayrı bir JS dosyasına nasıl koyabilirim? Denedim ve App, Hdr'u bulamıyor.

Here is a working demo.

kaynak

2015-10-12 getsetbro

http://plnkr.co/edit/Pw75IIuonyz9UlBhvWo5?p=preview

sadece

window.Hdr = Hdr

yapmak zorunda Ve çalışacaktır. Başka senaryosu gibi uygulamasında js dosyasını yükleyebilirsiniz

window.__MyApp__ = { 
    // a lot of app props 
} 
window.__MyApp__.Hdr = Hdr

kaynak

2015-10-12 02:24:43

Bana plnkr içinde gösterdiğiniz için teşekkür ederiz. Bu cevabı daha önce görmüştüm ama dosyalarda nereye ekleneceğinden emin değildim. – getsetbro

Sevindim, yardımcı olabilirim. –

Sadece genel istikrar için, global pencere nesnesine koyduğunuz herhangi bir şeyi adlandırmak isteyebilirsiniz, ör. 'window .__ MyAppName__ = window .__ MyAppName__ || {}; '' window .__ MyAppName __. Hdr = Hdr ' – Joshua

Yuşa yorum dayanarak: Düzenleme

. Ama daha temiz kullanacağını belirtmelisin.

kaynak

2015-10-12 02:54:15

Sadece yükleme JS dosyaları çalışmıyor. RequireJS kullanarak bir plnkr paylaşabilir misiniz? – Kailash

Bir React uygulamasının yapı sistemi olmayan farklı JS dosyalarında bileşenleri olabilir mi?

cevap

İlgili konular