Sitemin başlığının 10 kategori resmi var (bağlantılar). Her biri, kategorinin ilgili kategorisiShow'a yönlendirmek için React-Router'ın Link bağlantısını kullanır.React-Router'ın Link-URL'sini günceller ancak yenilemez. Sayfayı yenile
bağlantıcategoryIndex gelen eserler, ancak artık formunu bir cagetoryShow tıklandığını çalışır. Tıklandığında tarayıcıyı düzgün bir şekilde günceller, örneğin pushState/cateories/18 ve/categories/2 komutlarını yapar, ancak tarayıcı yenilenmez.
Değerleme, diğer tüm Dizin türünden ve Gösterme türü sayfalardan bağlantı bağlantı noktasıdır. Özellikle categoryShow'dan çalışmıyor. Aynı isme, örneğin Link to = "categoryShow", bir şekilde art arda tıklamalar, yönlendirici bir sayfa yenileme yapmaktan tutar? Düzenleme: Bunu değiştirmeyi denedim: = {"/ categories /" + this.props.id} için bağlantı ve aynı şeyi yapıyor.
İşte önemli bileşen yapısı. URL'yi güncelleyerek tüm veriler başarıyla iletiliyor.
-categoryShow
-header (fetches and passes category data to child)
-headerMenu (receives category data, passes on to child)
-headerMenuCard (receives category data, uses the id in the link seen below)
headerMenuCard:
var HeaderMenuCard = React.createClass({
...
return(
<div >
<Link to="categoryShow" params={{id: this.props.id}} ></Link>
</div>
)
})
İşte CategoryShow, var link yolları:
var CategoryShow = React.createClass({
getInitialState: function(){
return{
didFetchData: false,
items: [],
userID: localStorage.getItem('userID'),
headerImage: "../categories.png"
}
},
componentDidMount: function(){
this.fetchData()
},
fetchData: function(){
var data = {
userID: this.state.userID
}
var params = this.props.params.id
$.ajax({
type: "GET",
url: "/categories/" + params,
data: data,
dataType: 'json',
success: function(data){
this.setState({didFetchData: 'true', items: data.items})
}.bind(this),
error: function(data){
alert("error! couldn't fetch category data")
}
})
},
render: function(){
var itemArray = this.state.items.map(function(item){
return <ItemCard name={item.name} key={item.id} id={item.id} photo_url={item.photo_url} description={item.description} userID={localStorage.getItem('userID')} like_status={item.like_status} />
})
return(
<div>
<Header />
<section className="body-wrapper">
{itemArray}
</section>
</div>
)
}
})
Cevaplardan değil, posterden açıklama istemek için yorumları kullanmalısınız. – miken32
Bu, componentWillUpdate içindeki durumu güncellemem gerektiğini anlamamda bana yardımcı oldu – kas