重用单个组件

Question

我试图使用单个组件在react应用程序中呈现两个不同的警告消息作为该警告消息的唯一区别(我在翻译文件中都有它们)是文字，所以我尝试传递语言道具如下所示，我不确定如何在调用组件时传递语言道具

const WarningOnIncorrectPassword = ({ onYes, onNo, isOpen, language }) => {
return (
<Typography variant="p14">{language}</Typography>

<WarningOnIncorrectPassword
language={I don't know what to pass here if I pass translation 1 it renders that text only}
isOpen={warningVisible}
onYes={handleagreewarning}
onNo={handleDisagreewarning}
/>

我尝试传递如下函数，但失败了:

const checkWarningMessage=()=>{
if(it is a password error)
{
return translation_id.password_warning;
}
else
{
return translation_id.username_warning;
}

预期结果:如果密码错误"密码错误"这是已经存在的组件，所以现在我只需要修改组件，以显示以下警告消息，如果用户名是错误的"用户名是错误的"

翻译是一个文件名，我在其中存储了警告消息，因为所有现有组件都是这样呈现的

我是这样存储的:

ng_loginWarning_passwordwrong_warning: {
id: 'ng_loginWarning_passwordwrong_warning',
defaultMessage: 'Password is incorrect'
},
ng_loginWarning_userNamewrong_warning: {
id: 'ng_loginWarning_usernamewrong_warning',
defaultMessage: 'username is incorrect'
},

我很感激任何帮助，谢谢!

Answer 1

您需要传递language={language}，其中{language}将包含您需要提供给道具的详细信息。

<WarningOnIncorrectPassword
language={language}
isOpen={warningVisible}
onYes={handleagreewarning}
onNo={handleDisagreewarnin
/>