отобразить текстовое поле внутри моего метода getStepContent

Question

Я новичок, чтобы реагировать, и я пытаюсь научиться реагировать, используя материал-интерфейс.Я пытаюсь отобразить текстовое поле внутри моего метода 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";
  }
}

Answer 1

Вам не хватает скобки: 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 Component в отдельную функцию const и вернуть его!

const EXAMPLE_STRING = "food"

Надеюсь, это помогло!

SYNTAX GUIDE

Если вы хотите использовать ключевое слово this:

DO:

class Example {
  example_function() {
    this.state ....
  }
}

НЕ

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
  }
}

НЕ

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!!!
  }
}

Answer 2

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