英文:
Solve the problem of react icons showing object inside js
问题
When adding icons inside the js condition, the icon appears as an object only, and the icon does not appear
{!signUp ? `${(<FcGoogle />)}` + "Signin With Google" : `${(<FcGoogle />)} SignUp With Google`}
英文:
When adding icons inside the js condition, the icon appears as an object only, and the icon does not appear
{!signUp ? `${(<FcGoogle />)}` + "Signin With Google": `${(<FcGoogle />)} SignUp With Google`}
答案1
得分: 1
你不能将组件放在字符串内，因为它们是不返回字符串的函数。你可以移除``符号周围的<FcGoogle />或者（在我看来）更好的做法是：
<button
className="btn"
type="submit"
disabled={disabled}
onClick={handleClick}
>
<FcGoogle />
{!signUp ? "登录" : "注册"} 使用Google
</button>
英文:
You cannot put components inside a string since they are functions that do not return strings. You could either remove the `` around <FcGoogle /> or (IMO) better:
<button
className="btn"
type="submit"
disabled={disabled}
onClick={handleClick}
>
<FcGoogle />
{!signUp ? "Signin" : "Signup"} With Google
</button>
答案2
得分: 1
如果我们呈现的图标不会根据signUp的值而改变，解决这个问题的更干净方法是在字符串内部使用三元条件运算符并有条件地呈现文本，如下所示：
export function SignInOrSignUp({ signUp }) {
return (
<>
<FcGoogle /> {`${signUp ? '登录' : '注册'} 使用Google`}
</>
)
}
这还具有保持我们的代码 DRY 的附加好处。
英文:
If the icon we render doesn't change depending on the value signUp; a cleaner approach to solve this challenge would be use a ternary inside the string and conditionally render the text like below:
export function SignInOrSignUp({ signUp }) {
return (
<>
<FcGoogle /> {`${signUp ? 'Signin' : 'Signup'} With Google`}
</>
)
}
This has the added benefit of keeping our code DRY also.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论