Reaktif-yönlendirici, diğer bileşenlere paragraflar üzerinden nasıl geçiyor?

Question

Bugüne kadar, özellikleri parametreleri ile başka bir bileşeninden geçirilen konusunda benim bilgi ölçüde

// başlangıç ​​aşağıdaki gibidir: Bildiğim kadarıyla ölçüde içinde topic bazı devlet değişkeni vardır varsayalım

denilen A.jsx. Ben B.jsx bu aşağı geçmek istiyorum, bu yüzden aşağıdaki gerçekleştirmek Sonra şeyler

module.exports = React.createClass({ 
render: function() { 
    return <div><h2>Today's topic is {this.props.params}!</h2></div> 
} 
}) 

gibi hangi verecek çağrıda "Bugünün konusunu yapabilirsiniz B.jsx yılında

B = require('./B.jsx') 
getInitialState: function() {return {topic: "Weather"}} 
<B params = {this.state.topic}> 

Hava Durumu! "

// uç: Artık

benim bilgi ölçüde, aşağıdaki kodu ile reaksiyona-yönlendirici bir öğretici gidiyorum pasajlarını

topic.jsx:

module.exports = React.createClass({ 
    render: function() { 
    return <div><h2>I am a topic with ID {this.props.params.id}</h2></div> 
    } 
    }) 

yolları .jsx:

var Topic = require('./components/topic'); 
module.exports = (
    <Router history={new HashHistory}> 
    <Route path="/" component={Main}> 
     <Route path = "topics/:id" component={Topic}></Route> 
    </Route> 

    </Router> 
) 

header.jsx:

Burada this.state.topics, Refluks yoluyla imgur API'den alınan konuların listesidir.

Sorum geçerli: hangi mekanizmayla tarafından params topic.jsx için props için geçilen? Kodun hiçbir yerinde yukarıdaki bölümde "bilgimin kapsamı" ile ilgili bir deyim görüyorum. route.jsx veya header.jsx öğelerinde <Topic params = {this.state.topics} /> yoktur. full repo here'a bağlantı. Tepki yönlendirici dokümanlar, paramiklerin "parsed out of the original URL's pathname" olduğunu söylüyor. Bu benimle rezonans etmedi.

Answer 1

Bu, react-router dahili hakkında bir sorudur.

react-router bir Tepki bileşenidir ve tüm yönlendirme bilgilerini tekrar tekrar çocuk bileşenlerine iletmek için props kullanır. Ancak, bu, react-router'un bir uygulama detayıdır ve bunun kafa karıştırıcı olabileceğini anlıyorum, bu yüzden daha fazla ayrıntı için okumaya devam edin.

sizin örnekte yönlendirme beyanıdır:

<Router history={new HashHistory}> 
    <Route path="/" component={Main}> 
    <Route path = "topics/:id" component={Topic}></Route> 
    </Route> 
</Router> 

Yani temelde, Tepki-Yönlendirici yönlendirme beyanı (Ana, Konu) ve bileşenlerinin her geçeceği her birine şu sahne "pas" Bileşen, React.createElement yöntemini kullanarak oluşturulduğunda. değerleri react-router kullanılarak çeşitli mekanizmalar farklı bölümleri tarafından hesaplanır sahne (örneğin normal ifade ifadeler kullanarak URL adresi veriyi çıkarmak)

const props = { 
    history, 
    location, 
    params, 
    route, 
    routeParams, 
    routes 
} 

: Burada her bir bileşenin iletilen tüm sahne bulunmaktadır.React.createElement10 yönteminin kendisi react-router'un bir öğe oluşturmasını ve yukarıdaki bölümleri geçmesini sağlar.

Yöntemin imzası:

this.createElement(components[key], props) 

react-router elemanları (Main, Konu her başlatmak için yukarıda tanımlanan sahne kullandığı Anlamı:

ReactElement createElement(
    string/ReactClass type, 
    [object props], 
    [children ...] 
) 

Yani temelde iç uygulanmasında çağrı benziyor vb), bu nedenle Topic bileşenlerinin kendisinde this.props.params'a nasıl erişebileceğinizi açıklar, react-router tarafından geçirilmiştir! Bu cevap için