如何在Reactjs中将classname和变量放在三元组中？

Question

我有不同的数据。他们中的一些只有图标，其中一些有img。我想控制数据是否iconurl在开头是否为null然后如果有图标url我将使用FontAwesome如果iconurl = null我将使用img标签。但是我的图像没有出现在屏幕上。我也无法将名称带到h3标签。它在屏幕上看起来是空的。我有点困惑。你可以帮帮我吗？先感谢您。

注意：我已经检查了一些反应中的三元例子，但它们太基本了。

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>
        )
    );
}

Answer 1

我解决了这样的问题：

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;