Я новичок в реагировании, и я пытаюсь научиться реагировать с помощью 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";
  }
}
0
user10509524 22 Окт 2018 в 22:47

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!!!
  }
}
0
Daniel Choi 22 Окт 2018 в 21:14

Вы возвращаете строку. Вы хотите вернуть 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}.

1
lumio 22 Окт 2018 в 19:55
52936773