Я новичок в реагировании, и я пытаюсь научиться реагировать с помощью material-ui. Я пытаюсь отобразить текстовое поле внутри моего метода getStepContent. Для каждого степпера мне нужно разработать свой пользовательский интерфейс, поэтому я дал внутри метод getStepContent. Но проблема в том, что он отображается как html, и я не вижу ошибок. Подскажите, как это исправить. Предоставляю свой код ниже.
https://codesandbox.io/s/2okwnkoonn
function getStepContent(step) {
switch (step) {
case 0:
return `<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
/>
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.`;
case 1:
return "An ad group contains one or more ads which target a shared set of keywords.";
case 2:
return `Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.`;
default:
return "Unknown step";
}
}
2 ответа
Вам не хватает скобок: return () И вы пытаетесь вернуть строку, а не JSX.
Кроме того, когда вы работаете с текстовыми полями в HTML и React, вы хотите, чтобы текст был заключен в теги текстового поля.
<TextField>sample text</TextField>
Вот желаемый формат:
function getStepContent(step) {
switch (step) {
case 0:
return (
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
>
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.
</TextField>
)
case 1:
return (
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
>
An ad group contains one or more ads which target a shared set of keywords.
</TextField>
)
case 2:
return (
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
>
Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.
</TextField>
)
default:
return (
<Text>Unknown step</Text>
)
}
}
Однако я хочу подчеркнуть, что если вы хотите вернуть такую длинную строку, вы должны поместить их в постоянную переменную !!
Кроме того, если вы хотите сделать свой код еще красивее, вы можете поместить компонент TextField в отдельную константную функцию и вернуть его!
const EXAMPLE_STRING = "food"
Надеюсь, это помогло!
СИНТАКСИСНОЕ РУКОВОДСТВО
Если вы хотите использовать ключевое слово это:
< Сильный > DO:
class Example {
example_function() {
this.state ....
}
}
< Сильный > DO NOT
function example_function() {
this.state ... // ERROR
}
class Example {...}
Если вы не хотите сталкиваться с исключением указателя NULL :
< Сильный > DO:
class Example {
constructor(props) {
this.state = {
name: 'initialize'
age: 0 // initialize
friends: [] // initialize
}
}
example_function() {
console.log(this.state.name) // will not crash because it is initialized
}
}
< Сильный > DO NOT
class Example {
constructor(props) {
this.state = {
age: 0 // initialize
friends: [] // initialize
}
}
example_function() {
console.log(this.state.name) // CRASH because attribute name does not exist!!!
}
}
Вы возвращаете строку. Вы хотите вернуть JSX. Однако вам также необходимо передать свои классы и свое состояние, поскольку вы используете их в возвращаемом значении.
Короче говоря, вместо того, чтобы заключать все в обратные кавычки, вы делаете что-то вроде этого.
function getStepContent(step) {
switch (step) {
case 0:
return (
<div>Step 0</div>
);
case 1:
return (
<div>Step 1</div>
);
case 2:
return (
<div>Step 2</div>
);
default:
return (
<div>Unknown step</div>
);
}
}Не забывайте, вам также необходимо передать вашей функции состояние и классы, поэтому вы можете использовать ее как {classes.textField}.
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].