Question

我必须在React中创建一个CRUD应用程序。

我使用相同的表单进行更新和创建。

显示所有数据后，我连续单击“更新”，获取ID并重定向到表单。

我的问题是因为创建原因，因为我的URL带有侧边栏，并且我无法传递ID参数，因此无法创建条件。例如If（id === null）->重定向表单/->否则->重定向表单/ {id}

dashRoutes.js

//HERE I WANT TO GET THE ID FROM THE LIST BECAUSE "/form_promo/:promoId" works but I can't do any condition.

let dashRoutes = [

    {
        path: `/form_promo/{promoid}`,
        name: "Add Promo",
        icon: "ui-1_simple-add",
        component: UpdateSinglePromo,
        layout: "/admin"
    }

];
export default dashRoutes;

index.js

<Route path="/admin/form_promo" component={UpdateSinglePromo}/>
<Route path="/admin/form_promo/:promoId" component={UpdateSinglePromo}/>

PromoCatalogList.jsx

class PromoCatalogList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            promos: [],
            message: null
        };
       //
       //
        this.updatePromoClicked = this.updatePromoClicked.bind(this);
        this.addPromo = this.addPromo.bind(this);
    }

    componentDidMount() {
       //
    }

    refreshCourses() {
     //
    }

    switchOffPromo(promoId) {
       //
    }

    addPromo() {
        this.props.history.push(`/admin/form_promo`)
    }

    updatePromoClicked(promoId) {
        console.log('update ' + promoId);
        this.props.history.push(`/admin/form_promo/${promoId}`)
    }

    render() {
        let promos = this.state.promos.map((item) => ({
            update:
                <MDBBtn type="button" className="btn btn-outline-success waves-effect"
                        onClick={() => this.updatePromoClicked(
                            item.promoId,
                            item.prizeId,
                            item.ijCod,
                            item.title,
                            item.description,
                        )}>Update</MDBBtn>,

                promoId: item.promoId,
                prizeId: item.prizeId,
                ijCod: item.ijCod,
                title: item.title,
                description: item.description,

               delete:
                    <MDBBtn outline color="danger"
                            onClick={() => this.switchOffPromo(item.promoId)}>OFF</MDBBtn>
            }))
        ;

        const data = {
            columns: columnsHeaders,
            rows: promos
        };

        return (
            <>
                <PanelHeader size="sm"/>
                <div className="content">
                   //
                                    <MDBDataTable
                                        striped
                                        bordered
                                        small
                                        data={data}
                                    />
                  //
                </div>
            </>
        );
    }
}


export default PromoCatalogList

因此，如果id不为null，我想在我的dashRoutes.js中显示一个不同的名称，例如“ Edit Promo”。

此刻，我可以显示或显示空白表单“ formPromo /”或更新表单“ formPromo /：promoId”，而不是一起显示。

如何在React中的组件之间传递参数？

0 个答案: