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

我必须在React中做一个CRUD应用程序

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

当显示所有数据时，我单击一行中的“更新”，获取ID并重定向到表单

我的问题是Create beas，因为我有一个带有URL的侧栏，无法传递ID参数以便创建条件。 e、 g.If（id==null）-->redirect form/-->else-->redirect form/{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

类PromoCatalogList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
宣传片：[]，
消息：空
};
//
//
this.updatePromoClicked=this.updatePromoClicked.bind（this）；
this.addPromo=this.addPromo.bind（this）；
}
componentDidMount（）{
//
}
进修课程（）{
//
}
关闭promo（promoId）{
//
}
addPromo（）{
this.props.history.push（`/admin/form\u promo`）
}
updatePromoClicked（promoId）{
console.log（'update'+promoId）；
this.props.history.push（`/admin/form_promo/${promoId}`）
}
render（）{
让promos=this.state.promos.map（（项）=>({
更新：
已单击此.UpdatePromo(
item.promoId，
项目1.prizeId，
项目1.ijCod，
项目名称，
项目名称：，
)}>更新，
promid:item.promid，
prizeId:item.prizeId，
ijCod:item.ijCod，
标题：item.title，
description:item.description，
删除：
this.switchOffPromo（item.promoId）}>OFF
}))
;
常数数据={
专栏：专栏作家，
行：促销
};
返回(
//
//
);
}
}
导出默认目录列表

因此，如果id不为null，我希望在dashRoutes.js中显示不同的名称，如“编辑促销”

---

在这一刻，我可以显示或显示空表单“formPromo/”或更新表单“formPromo/：promoId”，但不能同时显示。

为什么您在您的问题上标记了java和angular？@AJT_82对不起，我忘了写我知道如何使用angular而不是React。以后我会更加关注标签；）你为什么在你的问题上加上java和angular的标签？@AJT_82对不起，我忘了写我知道如何用angular而不是React来做。以后我会更加关注标签；）