React项目中ReactToastify的position属性配置不生效如何解决

根因定位 #

你代码中toast.success的配置参数存在拼写错误，将定位属性position错误写为poistion，导致组件无法识别该配置，自动使用默认的顶部定位规则。

修复方法 #

有两种可选修复方案，按需选择即可：

• 方案1：调用toast时单独配置定位，仅修正拼写错误即可

// 修正后的submit方法代码
const submit = () => {
    toast.success('Your Message was sent to Wasfa Team', { position: toast.POSITION.BOTTOM_RIGHT });
}

• 方案2：全局配置定位，所有toast默认展示在右下角，无需每次调用时单独配置

// 可移除toast.configure()的冗余配置，直接给ToastContainer加定位属性
function myComponent () {
    // ...其他逻辑
    const submit = () => {
        toast.success('Your Message was sent to Wasfa Team');
    }
    return (
        // ...其他组件
        <ToastContainer position={toast.POSITION.BOTTOM_RIGHT} />
    )
}

注意事项 #

如果你之前在toast.configure()方法中传入过定位相关的全局配置，需要确认该配置与实际需求一致，避免出现配置优先级冲突导致定位不生效。

内容的提问来源于stack exchange，提问作者SDB_1998