Javascript 如何在Reactjs中将类名和变量放在三元组中？

我有不同的数据集。有些只有图标，有些有图像。我想在开始时控制数据iconurl是否为null，然后如果有图标url，我将使用Fontsome；如果iconurl=null，我将使用img标记。但我的图像并没有出现在屏幕上。我也不能把名字带到h3标签上。它在屏幕上看起来是空的。我有点困惑。你能帮我吗？先谢谢你

注：我已经检查了react中的一些三元示例，但它们太基本了

render() {
    return (
        this.state.diagnoses.map(user =>
            <div className={'cat-box-region'}>
                <div className={'cat-box-position'}>
                    <div className={'cat-box'}>
                        {user.IconUrl ? (<FontAwesomeIcon icon={user.IconUrl} size="3x" className={'icon'}/>) : (<img src={user.ImgUrl} className={'ultrasound-img'}/>)}
                        <h3>{user.name}</h3>
                    </div>
                </div>
            </div>
        )
    );
}

render（）{
返回(
this.state.diagnostics.map（用户=>
{user.IconUrl？（）：（）}
{user.name}
)
);
}

我解决了这样的问题：

class DiagnosisBox extends Component {
static propTypes = {};

state = {
    diagnoses: [],
    diagnosesWithImg: [],
    diagnosesWithIcon: []
};

componentDidMount() {
fetch('http://localhost:51210/api/service')
    .then(response => {
        return response.json();
    }).then(diagnoses => {
    this.setState({
        diagnoses,
    });
    console.log(diagnoses);
  })
}

render() {
this.state.diagnoses.map(stateData =>
    stateData.iconUrl ? this.state.diagnosesWithIcon.push(stateData)
        : this.state.diagnosesWithImg.push(stateData)
);

return (
    <div className={'cat-box-region'}>
        {this.state.diagnosesWithIcon.map(data =>
            <div key={data.id} className={'cat-box-position'}>
                <div className={'cat-box'}>
                    <FontAwesomeIcon icon={data.iconUrl} size="3x" className={'icon'} />
                    <h3>{data.diagnosisName}</h3>
                </div>
            </div>
        )}

        {this.state.diagnosesWithImg.map(data =>
            <div key={data.id} className={'cat-box-position'}>
                <div className={'cat-box'}>
                    <img src={data.ImgUrl} className={'ultrasound-img'}/>
                    <h3>{data.diagnosisName}</h3>
                </div>
            </div>
        )}

        </div>
    );
  }
}

export default DiagnosisBox;

类诊断盒扩展组件{
静态propTypes={}；
状态={
诊断：[]，
诊断代码：[]，
诊断开关：[]
};
componentDidMount（）{
取（'http://localhost:51210/api/service')
。然后（响应=>{
返回response.json（）；
})。然后（诊断=>{
这是我的国家({
诊断，
});
控制台日志（诊断）；
})
}
render（）{
this.state.diagnostics.map（stateData=>
stateData.iconUrl？this.state.diagnosticswithicon.push（stateData）
：this.state.diagnosticswithimg.push（stateData）
);
返回(
{this.state.diagnosesWithIcon.map（数据=>
{data.diagnosisName}
)}
{this.state.diagnostiswithimg.map（数据=>
{data.diagnosisName}
)}
);
}
}
导出默认诊断框；

我没有看到任何与三元表达式相关的内容。这完全取决于可能不是您期望的数据。请提供，似乎

用户

没有您认为的价值。添加

控制台.log（用户）

并验证其值。用简单文本替换图像/图标。显示哪一个？试着在没有三元组的情况下显示它，它可能仍然无法显示，因此排除了您声称存在的问题。也许您也必须使用大括号作为映射函数。对于每个渲染，我们不需要单亲标记吗？如果您解决了问题，您可能希望（并最终接受它以标记问题已解决）而不是对您的问题进行编辑