Question

我需要在以下代码中将const转换为React组件格式。但是我做不到，即使我必须尝试状态。以下是实际代码。

const LoginPage = () => {

const styles = {
    loginContainer: {
      minWidth: 320,
      maxWidth: 400,
      height: 'auto',
      position: 'absolute',
      top: '20%',
      left: 0,
      right: 0,
      margin: 'auto'
    },
  };

return (
    <MuiThemeProvider muiTheme={ThemeDefault}>
      <div>
        <div style={styles.loginContainer}>
         <h1>Testing</h1>
                   <Checkbox
                    label="Remember me"
                    style={styles.checkRemember.style}
                    labelStyle={styles.checkRemember.labelStyle}
                    iconStyle={styles.checkRemember.iconStyle}
                  />
        </div>
      </div>
    </MuiThemeProvider>
);

但是由于我具有一些构造和互动性，所以我想从const LoginPage转换为class LoginPage extends React.Component，但是当我使用样式时，它给了我错误的感觉。

class LoginPage extends React.Component {

    constructor(props) {
      super(props);

      if(authenticationService.currentUserValue) {
        this.props.history.push('/');
      }

    }

>>  const styles = {
      loginContainer: {
        minWidth: 320
}
}

render() {
    return (
      <MuiThemeProvider muiTheme={ThemeDefault}>
        <div>
          <div style={styles.loginContainer}>
          <h1>Test</h1>
          </div>
        </div>
      </MuiThemeProvider>
     )
}
}

那么我该如何在我的React.Component结构中使用这些样式。

Answer 1

使用类之外的样式

class LoginPage extends React.Component {

    constructor(props) {
      super(props);

      if(authenticationService.currentUserValue) {
        this.props.history.push('/');
      }

    }

render() {
    return (
      <MuiThemeProvider muiTheme={ThemeDefault}>
        <div>
          <div style={styles.loginContainer}>
          <h1>Test</h1>
          </div>
        </div>
      </MuiThemeProvider>
     )
}
}

const styles = {
      loginContainer: {
        minWidth: 320
}
}

在React主题中使用样式

1 个答案: