React:基于url (image)的条件

Question

我有两张图片，我想提出一个条件，如果他是男性，就给他这张照片，如果他是女性，就给他第二张照片如果他与两者不同，那么他将不会呈现任何内容

import Female from '../images/Me.png';
import male from '../images/Daniel.png';
style={{backgroundImage:props.gender === 'Male' ? `url(${male})`: 
null,backgroundImage:props.gender === 'Female' ? `url(${Female})`: null }}

我理解，因为我给了null，所以他重写了它，它不会向我显示生活中的男性，但我没有找到另一种方法来实现它

Answer 1

你可以这样写:

style={{backgroundImage: !!props.gender ? (props.gender === 'Male' ? `url(${male})`: 
`url(${Female})`) : null }}

如果道具。性别是真实的，那么检查是否为男性?如果未指定性别(false)，则将为null。

另一种方法是你可以自己限制这个值。

style={{backgroundImage: ["Male","Female"].includes(props.gender) ? (props.gender === 'Male' ? `url(${male})`: 
`url(${Female})`) : null }}

检查props的值。性别首先是男性或女性，否则将为空。