Question

我们正在研究一种概念验证，即，我们在一个脚本标记中添加了另一个站点的javascript url。而且，我们正在注入“属性列表”的HTML以及属性详细信息，这些属性通过使用React Js单击属性标题即可。因此，现在我们必须为属性详细信息部分实现路由。

示例：

我们要求客户在要显示属性列表的地方添加脚本标签。

<script src="http://provider_site_host/scripts/load-property.js"></script>

所以基本上我们注入的HTML是另一个网站的一部分。

因此默认情况下，URL将类似于以下示例

https://www.consumer_site.com

因此，假设该站点的默认页面包含我们要求客户端添加的脚本标签，那么属性列表将显示在添加脚本标签的位置。

我们需要它，就像我们单击属性标题一样，浏览器中的URL应该以“ {https://www.consumer_site.com/property/property_Id/property_title”之类的格式更改，并应显示相应的属性详细信息。

当前，我们有三个主要组成部分：

PropertyBox组件
PropertyList组件
“财产详细信息”组件

当前使用在PropertyBox组件中注册的react js中的事件显示属性详细信息，单击属性标题将调用此事件，然后将当前组件切换为属性详细信息组件。

从属性列表组件切换到属性详细信息组件的代码如下：

PropertyBox组件：

class PropertyBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        /* data variable */
        data: props.initialData,
        searchValue: '',
        /* property detail view variable */
        showPropertyDetails: false,
        propertyObject: null,
        };

        // register the events
        this.searchProperty = this.searchProperty.bind(this);
        this.updatePropertyInput = this.updatePropertyInput.bind(this);
        /* handle page change event */
        this.handlePageChanged = this.handlePageChanged.bind(this);
    }

    render() {
        var renderPropertyDetails = this.renderPropertyDetails;
        var backToPropertyList = this.backToPropertyList;

        // this variable is used to show the property details or property list based on value of "showPropertyDetails"
        // if showPropertyDetails = true then display the property details
        // else display property list
        let propertyElement

        // check if property has images or not
        if (this.state.showPropertyDetails == true) {
            propertyElement = <div><PropertyDetails data={this.state.propertyObject} backToPropertyList={backToPropertyList.bind(this)} /></div>
        }
        else {
            propertyElement = "<html of property list>"
        }

    return (
        <div className="property-box col-sm-12">
            {propertyElement}
        </div>
    );

    // this function is setting state variable for property detail
    loadPropertyDetails(propertyObject) {
        // set the state with property object
        this.setState({ propertyObject: propertyObject, showPropertyDetails: true });
        // return true is set for Promise object for work further
        return true;
    }

    // this function is used to display the property details on click of property title
    renderPropertyDetails(propertyObject) {
        // method is used to load property detail and later scroll to control top
        return new Promise((resolve, reject) => { resolve(this.loadPropertyDetails(propertyObject)); })
            .then(() => {
                this.scrollToControlTop();
            });
    }

    // this function is setting state variable for property list
    loadPropertyList() {
        // set the state with property object
        this.setState({ showPropertyDetails: false });
        /* https://www.fullstackreact.com/30-days-of-react/day-15/ */
        // return true is set for Promise object for work further
        return true;
    }

    // this function is used to display the property list on click on property detail page
    backToPropertyList() {
        // method is used to load property detail and later scroll to control top
        return new Promise((resolve, reject) => { resolve(this.loadPropertyList()); })
            .then(() => {
                this.scrollToControlTop();
            });
    }

    // this event will be called when text in changed in text box
    updatePropertyInput(evt) {
        if (evt.target.id == "txtSearch") {
            this.setState({ searchValue: evt.target.value });
        }

        if (evt.target.id == "rbtnSale" || evt.target.id == "rbtnRent") {
            this.setState({ propertyCategory: evt.target.value });
        }

        if (evt.target.id == "ddlPropertyType") {
            this.setState({ propertyType: evt.target.value });
        }
    }

    // this event will be called on search button click
    searchProperty(event) {
        event.preventDefault();
        this.getPropertyData(this.state.propertiesPerPage, 0, this.state.searchValue, this.state.propertyCategory, this.state.propertyType);
    }

    // this event is used to fetch the property data from data base using web api
    getPropertyData(){
        // it contains code for getting the property data from the controller

    }.bind(this);
}

属性列表组件：

class PropertyList extends React.Component {
    getInitialState() {
        return { showResults: false };
    }

    onClick() {
        this.setState({ showResults: true });
    }

    render() {
        var renderPropertyDetails = this.props.renderPropertyDetails;
        var propertyRows = this.props.data.map((property, index) => {
            return (
                <div key={index} className="card mb-3">
                    // property list HTML
                </div>
            )
        });
        return (
            <div className="propertyWrapper">
                {propertyRows}
            </div>
        )
    }
}

“财产详细信息”组件：

class PropertyDetails extends React.Component {
    render() {
        var property = this.props.data;
        var backToPropertyList = this.props.backToPropertyList;
        return (
            <div className="row">
                // html of property details
            </div>
        );
    }
}

所有组件都在同一.jsx页面中。

我希望浏览器URL的格式为“ https://www.consumer_site.com/property/propertyId/propertyTitle”

当前网址未更改，仅显示属性详细信息组件。

有没有反应路线的例子，我们可以在概念证明中实现吗？

如何使用React Js实现路由？

0 个答案: