React根据性别props条件渲染背景图片的正确实现方法

你的代码问题核心是JS对象中同名属性会被后声明的值覆盖：你在style对象里写了两次backgroundImage，无论男性判断分支结果是什么，都会被后面的女性判断逻辑覆盖，自然男性图片永远无法展示。

直接把两次属性判断合并成一套分支逻辑即可，推荐两种可直接用的写法：

写法1：三元嵌套（适合简单判断场景） #

删掉重复的backgroundImage声明，把两层判断合并，非目标性别场景用CSS标准的none值实现不展示图片的效果，另外建议统一导入变量的命名规范，避免大小写混乱写错：

import Female from '../images/Me.png';
import Male from '../images/Daniel.png'; // 原代码male变量为小写开头，和Female的命名风格统一

<div 
  style={{
    backgroundImage: props.gender === 'Male' 
      ? `url(${Male})` 
      : props.gender === 'Female' 
        ? `url(${Female})` 
        : 'none'
  }}
/>

写法2：提前计算背景值（适合后续可能扩展更多性别的场景） #

把判断逻辑抽离出来，JSX结构会更清晰，后续加新性别分支也更好维护：

import Female from '../images/Me.png';
import Male from '../images/Daniel.png';

// 组件内提前计算对应背景值
const genderBackground = (() => {
  if (props.gender === 'Male') return `url(${Male})`
  if (props.gender === 'Female') return `url(${Female})`
  return 'none'
})()

// JSX中直接引用计算结果
<div style={{ backgroundImage: genderBackground }} />

注意事项 #

• 不要在JSX的style对象里重复声明同名CSS属性，后写的属性会完全覆盖前面的结果
• 无背景图场景优先用CSS标准值none，比返回null的兼容性和语义都更好
• 导入的图片变量建议保持统一命名风格，避免大小写混用引发的低级错误

内容的提问来源于stack exchange，提问作者Tommy Udi