Как поместить имя класса и переменные в троичный в Reactjs? - PullRequest
Новая
       7

Как поместить имя класса и переменные в троичный в Reactjs?

0 голосов
/ 11 сентября 2018

У меня разные данные. У некоторых из них есть только значок, а у некоторых - img. Я хочу контролировать данные независимо от того, является ли iconurl нулевым или нет в начале, а затем, если у него есть иконка 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>
        )
    );
}

1 Ответ

0 голосов
/ 13 сентября 2018

Я решил проблему так: 

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;
...