Question

我是新来的反应者，我正在尝试使用material-ui学习反应。我正在尝试在我的getStepContent方法中显示一个文本框。对于每个步进器，我需要开发不同的ui，因此我在内部设置了getStepContent方法。但是问题是它显示为html，我看不到anty错误。你能告诉我如何解决它。在下面提供我的代码。

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

您正在返回一个字符串。您想要做的就是返回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}一样使用它。

Answer 2

您缺少括号：返回（） 并且您正在尝试返回一个字符串而不是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函数中并返回它！

const EXAMPLE_STRING = "food"

希望这对您有帮助！

语法指南

要使用关键字 this：

要做的事情：

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

不要

function example_function() {
  this.state ... // ERROR
}
class Example {...}

当您不想面对 NULL 指针异常时：

要做的事情：

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

在我的getStepContent方法中显示一个文本框

2 个答案:

语法指南