8.4 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 5a24c314108439a4d4036183 | Verwende fortgeschrittenes JavaScript in der React-Rendering-Methode | 6 | 301415 | use-advanced-javascript-in-react-render-method |
--description--
In früheren Aufgaben hast du gelernt, wie du mit geschweiften Klammern ({ }) JavaScript-Code in JSX-Code einfügst, z. B. für den Zugriff auf Eigenschaften (props), die Übergabe von Eigenschaften, den Zugriff auf den Zustand (state), das Einfügen von Kommentaren in deinen Code und vor allem für das Styling deiner Komponenten. Das sind alles gängige Anwendungsfälle für JavaScript in JSX, aber sie sind nicht die einzige Möglichkeit, wie du JavaScript-Code in deinen React-Komponenten verwenden kannst.
Du kannst JavaScript auch direkt in deine render-Methoden schreiben, vor der return-Anweisung, ohne es in geschweifte Klammern einzufügen. Das liegt daran, dass sie noch nicht im JSX-Code enthalten ist. Wenn du eine Variable später im JSX-Code innerhalb der return-Anweisung verwenden willst, setzt du den Variablennamen in geschweifte Klammern.
--instructions--
Im angegebenen Code enthält die render-Methode ein Array mit 20 Phrasen, die die Antworten aus dem klassischen Magic Eight Ball aus den 1980er Jahren darstellen. Der Klick-Event ist an die Methode ask gebunden. Jedes Mal, wenn der Button geklickt wird, wird eine Zufallszahl erzeugt und als randomIndex im Zustand gespeichert. Lösche in Zeile 52 den String change me! und weise die answer-Konstante neu zu, damit dein Code bei jeder Aktualisierung der Komponente zufällig auf einen anderen Index des Arrays possibleAnswers zugreift. Zum Schluss fügst du die answer-Konstante innerhalb des p-Tags ein.
--hints--
Die Komponente MagicEightBall sollte existieren und auf der Seite dargestellt werden.
assert.strictEqual(
Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall')
.length,
1
);
Das erste Kindelement von MagicEightBall sollte ein input-Element sein.
assert.strictEqual(
Enzyme.mount(React.createElement(MagicEightBall))
.children()
.childAt(0)
.name(),
'input'
);
Das dritte Kindelement von MagicEightBall sollte ein button-Element sein.
assert.strictEqual(
Enzyme.mount(React.createElement(MagicEightBall))
.children()
.childAt(2)
.name(),
'button'
);
Der Zustand von MagicEightBall sollte mit einer Eigenschaft userInput und einer Eigenschaft randomIndex initialisiert werden, die beide auf einen leeren String gesetzt sind.
assert(
Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') ===
'' &&
Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === ''
);
Wenn MagicEightBall zum ersten Mal in das DOM eingebunden wird, sollte es ein leeres p-Element zurückgeben.
assert(
Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 &&
Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === ''
);
Wenn du Text in das input-Element eingibst und auf den Button klickst, sollte die Komponente MagicEightBall ein p-Element zurückgeben, das ein zufälliges Element aus dem Array possibleAnswers enthält.
(() => {
const comp = Enzyme.mount(React.createElement(MagicEightBall));
const simulate = () => {
comp.find('input').simulate('change', { target: { value: 'test?' } });
comp.find('button').simulate('click');
};
const result = () => comp.find('p').text();
const _1 = () => {
simulate();
return result();
};
const _2 = () => {
simulate();
return result();
};
const _3 = () => {
simulate();
return result();
};
const _4 = () => {
simulate();
return result();
};
const _5 = () => {
simulate();
return result();
};
const _6 = () => {
simulate();
return result();
};
const _7 = () => {
simulate();
return result();
};
const _8 = () => {
simulate();
return result();
};
const _9 = () => {
simulate();
return result();
};
const _10 = () => {
simulate();
return result();
};
const _1_val = _1();
const _2_val = _2();
const _3_val = _3();
const _4_val = _4();
const _5_val = _5();
const _6_val = _6();
const _7_val = _7();
const _8_val = _8();
const _9_val = _9();
const _10_val = _10();
const actualAnswers = [
_1_val,
_2_val,
_3_val,
_4_val,
_5_val,
_6_val,
_7_val,
_8_val,
_9_val,
_10_val
];
const hasIndex = actualAnswers.filter(
(answer, i) => possibleAnswers.indexOf(answer) !== -1
);
const notAllEqual = new Set(actualAnswers);
assert(notAllEqual.size > 1 && hasIndex.length === 10);
})();
--seed--
--after-user-code--
var possibleAnswers = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes, definitely',
'You may rely on it',
'As I see it, yes',
'Outlook good',
'Yes',
'Signs point to yes',
'Reply hazy try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
"Don't count on it",
'My reply is no',
'My sources say no',
'Outlook not so good',
'Very doubtful',
'Most likely'
];
ReactDOM.render(<MagicEightBall />, document.getElementById('root'));
--seed-contents--
const inputStyle = {
width: 235,
margin: 5
};
class MagicEightBall extends React.Component {
constructor(props) {
super(props);
this.state = {
userInput: '',
randomIndex: ''
};
this.ask = this.ask.bind(this);
this.handleChange = this.handleChange.bind(this);
}
ask() {
if (this.state.userInput) {
this.setState({
randomIndex: Math.floor(Math.random() * 20),
userInput: ''
});
}
}
handleChange(event) {
this.setState({
userInput: event.target.value
});
}
render() {
const possibleAnswers = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes, definitely',
'You may rely on it',
'As I see it, yes',
'Outlook good',
'Yes',
'Signs point to yes',
'Reply hazy try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
"Don't count on it",
'My reply is no',
'My sources say no',
'Most likely',
'Outlook not so good',
'Very doubtful'
];
const answer = 'change me!'; // Change this line
return (
<div>
<input
type='text'
value={this.state.userInput}
onChange={this.handleChange}
style={inputStyle}
/>
<br />
<button onClick={this.ask}>Ask the Magic Eight Ball!</button>
<br />
<h3>Answer:</h3>
<p>
{/* Change code below this line */}
{/* Change code above this line */}
</p>
</div>
);
}
}
--solutions--
const inputStyle = {
width: 235,
margin: 5
};
class MagicEightBall extends React.Component {
constructor(props) {
super(props);
this.state = {
userInput: '',
randomIndex: ''
};
this.ask = this.ask.bind(this);
this.handleChange = this.handleChange.bind(this);
}
ask() {
if (this.state.userInput) {
this.setState({
randomIndex: Math.floor(Math.random() * 20),
userInput: ''
});
}
}
handleChange(event) {
this.setState({
userInput: event.target.value
});
}
render() {
const possibleAnswers = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes, definitely',
'You may rely on it',
'As I see it, yes',
'Outlook good',
'Yes',
'Signs point to yes',
'Reply hazy try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
"Don't count on it",
'My reply is no',
'My sources say no',
'Outlook not so good',
'Very doubtful',
'Most likely'
];
const answer = possibleAnswers[this.state.randomIndex];
return (
<div>
<input
type='text'
value={this.state.userInput}
onChange={this.handleChange}
style={inputStyle}
/>
<br />
<button onClick={this.ask}>Ask the Magic Eight Ball!</button>
<br />
<h3>Answer:</h3>
<p>{answer}</p>
</div>
);
}
}