Reactjs Prop: Создайте компонент Housefull
Создайте компонент HouseFull, который имеет логическое свойство hasSeat. Компонент должен отображать div с текстом Housefull или Vacant в зависимости от свойства.
import React from 'react';
import ReactDOM from 'react-dom';
import HouseFull from '../HouseFull';
import {shallow} from 'enzyme';
test('check HouseFull Render', () => {
const div = document.createElement('div');
ReactDOM.render(<HouseFull />, div);
});
it('Check for prop = true', () => {
const wrapper = shallow(<HouseFull hasSeat = {true}/>);
expect(wrapper.text().toLowerCase()).toEqual('vacant');
});
it('Check for prop = false', () => {
const wrapper = shallow(<HouseFull hasSeat = {false}/>);
expect(wrapper.text().toLowerCase()).toEqual('housefull');
//expect(wrapper.contains(<div>HouseFull</div>)).toEqual(true);
});
Это тестовый файл моего вопроса, пожалуйста, получите подробности отсюда .. Спасибо
Ответы 2
Вы можете использовать создание функционального компонента для того же
function HouseFull(props) {
const divText = props.hasSeat ? 'Vacant' : 'Housefull';
return <div>{ divText }</div>;
}
Если хотите, вы также можете использовать класс es6, оба они эквивалентны.
class HouseFull extends React.Component {
render() {
const divText = this.props.hasSeat ? 'Vacant' : 'Housefull';
return <div>{ divText }</div>;
}
}
Очень срочно нужна помощь, дайте мне знать решение вышеуказанной проблемы.
@umang, в чем именно заключается проблема, если вы хотите создать компонент, приведенного выше ответа должно хватить.
На самом деле, я столкнулся с ошибкой при проверке HouseFull Render (18 мс), проверке prop = true (3ms), проверке prop = false (1ms)
Это касается части рендеринга.
ReactDOM.render(
<HouseFull hasSeat = {true} />
document.getElementById("root") );
Вы можете изменить значение hasSeat по мере необходимости (true или false), чтобы получить соответствующие выходные данные.
Я предполагаю, что возник вопрос, как собрать такой компонент HouseFull.
Не могли бы вы добавить, какие подходы вы пробовали до сих пор?