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

Question

我是 React 新手，我正在尝试通过使用 Material-UI 来学习 React。我试图在我的 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

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