如何结合将 object 的不同部分作为 CSS 的 react.js 中的参数的条件

Question

我在其他主题中进行了搜索，但找不到我需要的内容。 在 React 的一个小组项目中，我必须根据 object 中的属性渲染背景颜色，该 object 本身位于 API 中。

必须控制 2 个不同属性的值，但我们只能通过隔离该值的最后一个字来管理一个（例如，在我们组件的 jsx 文件的代码中）：

const Profile = () => {
const params = useParams();
const [infoProfile, setInfoProfile] = useState({})

useEffect(() => {
    Axios
    .get(`https://a.nacapi.com/sainstgram.users?id=${params.id}`)
    .then((response) => {
        setInfoProfile(response.data[0])});
    }, [params.id])

function getCategory () {
    if (infoProfile.category){
        return infoProfile.category.split("'").pop().split(" ").pop()
    } else {
        return "";
    }
}

return (
    <div className={`Profile ${getCategory()}`}>  
        <CardProfile infoProfile={infoProfile} />
        <PostList className="PostList-profile" id={parseInt(params.id)}/>
    </div>
)
}

我还必须控制 infoProfile.name 的条件，因为某些类别的配置文件的值是 null 所以我必须控制名称。

我尝试使用包含并将其用作 className 以相同的原则放置另一个 function getName 但没有成功。

你能给我一个提示或其他方法吗？

提前致谢！

Answer 1

您可以使用一个 function 来创建您的 className，方法是首先检查category ，然后检查name 。

function getClassName () {
    if (infoProfile.category) {
        return infoProfile.category.split("'").pop().split(" ").pop()
    } else if (infoProfile.name) {
        return infoProfile.name // plus anything else you need to do to the name
    } else {
        return "";
    }
}

对于奖励积分，使用 react 的useMemo钩子记住你的 className 的值，这样就不必在每次渲染时都运行它。 更多信息。

const profileClass = useMemo(() => {
    if (infoProfile.category) {
        return infoProfile.category.split("'").pop().split(" ").pop()
    } else if (infoProfile.name) {
        return infoProfile.name // plus anything else you need to do to the name
    } else {
        return "";
    }
}, [infoProfile])
...
<div className={`Profile ${profileClass}`}>