根据组件的值呈现组件

Question

我有以下代码，我想只在<UserInfo />返回值而不是空字符串时呈现by{' '} <UserInfo />部分

<Typography>
Updated {item.updatedAt} ago, by{' '}
<UserInfo userId={item.updatedBy } />
</Typography>

我该怎么做?

export default function UserInfo({userId}) {   
const {useGet} = useApi()
const {data: userInfo} = useGet(`/users/${userId}`)
const [lastName, firstName] = userInfo?.data.displayName?.split(',') || ''
const userName = firstName && lastName ? `${firstName} ${lastName}` : userInfo?.data.displayName    
return <span>{userName}</span>
}

Answer 1

仅当<UserInfo />返回值

这是错误的方法，有几个原因。首先，检查组件本身是否返回值是没有多大意义的。其次，你的组件总是"返回一个值"

return <span>{userName}</span>

听起来您要检查的值是userName。因此，您需要将该逻辑移出<UserInfo>组件，或者移到父组件中(通常称为"提升状态")，或者移到更全局的位置(像Redux这样的全局状态管理系统，像useContext这样的钩子，等等)。

例如，假设您将该逻辑移动到自定义钩子中。然后每个组件都可以使用该钩子:

export default function UserInfo({userId}) {   
const {userName} = useUserName();
return <span>{userName}</span>;
}

在父组件中:

// somewhere above the JSX
const {userName} = useUserName();
// then within the JSX
<Typography>
Updated {item.updatedAt} ago
{ userName ? <>, by <UserInfo userId={item.updatedBy } /></> : null }
</Typography>

useUserName的实现将是一个新的自定义钩子，它执行与<UserInfo>组件中相同的逻辑，并公开该逻辑的结果。这样做的好处是，现在任何组件都可以观察到userName值(以及任何其他"用户")。值)。

---

一个未经测试的自定义钩子的例子可能是…

function useUserName(friendID) {
const [userName, setUserName] = useState('');
useEffect(() => {
// your exact logic for getting the username...
const {useGet} = useApi();
const {data: userInfo} = useGet(`/users/${userId}`);
const [lastName, firstName] = userInfo?.data.displayName?.split(',') || '';
const userName = firstName && lastName ? `${firstName} ${lastName}` : userInfo?.data.displayName;
// then...
setUserName(userName);
}, []);
return { userName };
}

Answer 2

你需要做的是:

在userInfo返回中添加by{' '}，您需要在<userInfo/>中放置一个条件，同时从<userInfo/>返回JSX，如果它返回一些东西，则在其返回块中加上by{' '}，并在条件的其他部分返回null。

注意:- null不会在页面上显示。

Answer 3

可以使用三元条件进行条件呈现，例如:

return(
... // other components
{
userInfo.value && (
by{' '}
<UserInfo />
)
}
)

按照React Docs的链接找到这些解决方案:https://reactjs.org/docs/conditional-rendering.html