0
我是一個React新手，我通過嘗試錯誤和谷歌搜索讓我的應用程序工作。不過，我想從你們有更多經驗的人那裏得到反饋。它的工作，但我不知道我是否以正確的方式或「最佳/好的做法」。更新React中兄弟組件的子組件數據
我主要關心的是我更新vehicleId以更新VehicleDetails數據的方式。對我來說，鏈接所有狀態和道具來更新另一個組件數據是很複雜的。我希望有更簡單的方法來做到這一點，否則這將是醜陋的發送屬性和泡沫到應用程序級別觸發更新。
你會如何以更好的方式做到這一點？
非常感謝:)
"use strict";
$(function() {
var App = React.createClass({
displayName: 'App',
getInitialState: function() {
return {
itemDetails: [],
selectedVehicleId: null
}
},
setSelectedVehicleId: function(selectedId){
this.setState({
selectedVehicleId: selectedId
});
},
render: function() {
return <div>
<VehicleList setSelectedVehicleId={this.setSelectedVehicleId}/>
<VehicleDetail selectedVehicleId={this.state.selectedVehicleId} />
</div>
}
});
var VehicleList = React.createClass({
getInitialState: function() {
return {
data: [],
selectedVehicleId: null
}
},
getListItems: function() {
$.ajax({
url: 'http://baseurl/webapi/vehicle/get',
type: 'GET',
dataType: 'json',
success: function (data) {
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err) {
console.log("error");
}.bind(this)
});
},
componentDidMount: function() {
this.getListItems();
},
setSelectedVehicle: function(e){
var selectedVehicleId = $(e.target).attr('data-vehicle-id');
this.props.setSelectedVehicleId(selectedVehicleId);
},
render: function() {
var self = this;
var rows = this.state.data.map(function (vehicle, i) {
return <VehicleRow setSelectedVehicle={self.setSelectedVehicle} data={vehicle} key={i}/>
})
return <div className="container list-content">{rows}</div>
}
});
var VehicleRow = React.createClass({
render: function() {
return <div className='row'>
<div className='col-md-6 car-info-container'>
<div className='vehicle-name' data-vehicle-id={this.props.data.VehicleId} onClick={this.props.setSelectedVehicle}>{this.props.data.VehicleName}</div>
</div>
</div>
}
});
var VehicleDetail = React.createClass({
getInitialState: function() {
return {
itemDetails: []
}
},
componentWillReceiveProps: function(nextProps) {
if (nextProps.selectedVehicleId != this.props.selectedVehicleId) {
this.getItemDetails(nextProps.selectedVehicleId);
}else if (nextProps.selectedVehicleId === this.props.selectedVehicleId && this.state.itemDetails.VehicleId){
this.hideDetails(this.state.itemDetails);
}
},
getItemDetails: function (vehicleId) {
var self = this;
$.ajax({
url: 'http://baseurl/webapi/vehicle/getdetails/'+ vehicleId,
type: 'GET',
dataType: 'json',
success: function(data) {
this.setState({itemDetails:data});
self.hideDetails(data);
}.bind(this),
error: function(xhr, status, err) {
console.log("error");
}.bind(this)
});
},
hideDetails: function(data){
$('.list-content').hide();
$('.details-content').show();
},
showDetails: function(){
$('.list-content').show();
$('.details-content').hide();
},
render: function() {
return <div className="container details-content">
<button className="btn btn-default back-button" onClick={this.showDetails}>Back</button>
<div className="image-container">
<img className='image' src={this.state.itemDetails.ImageUrl}/>
</div>
<div className="row vehicle-details-container">
<h3>Vehicle Details</h3>
<div className="col-md-6 no-padding">
<label className="col-md-3">Location:</label>
<span className="col-md-3">{this.state.itemDetails.Location}</span>
</div>
<div className="col-md-6 no-padding">
<label className="col-md-3">Make:</label>
<span className="col-md-3">{this.state.itemDetails.Make}</span>
</div>
</div>
</div>
}
});
React.render(<App />, document.body);
});