在React

Question

我是一个反应新手，我通过尝试错误和谷歌搜索使我的应用程序工作。但是我希望得到你们在这方面有更多经验的人的反馈。它有效，但我不确定我是以正确的方式做到的，还是＆＃34;最佳/良好做法＆＃34;。

我主要担心的是我更新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);

}); 

Answer 1

一旦您熟悉React的UI部分，我建议您阅读 Flux ：https://facebook.github.io/flux/docs/overview.html。

Flux将单向数据流带入React。您可以查看相同概念（reflux，backbone等）的简单实现。

基本概念是让组件触发数据更改到全局调度程序，该调度程序通过组件层次结构传递数据。而且由于React只更新了已更改的DOM，因此它与React完美匹配。