Question

当我将其转换为类组件时，正在定义

props。所以我们应该如何编写这是类组件

const Admin = props => {
      console.log(props);
      const username  = props.location.username;
        
      return (
        <div>
          <NavLink to="/" activeClassName="active">
            LOGOUT
          </NavLink>
          <br/>
          <br/>
         <Button>hello</Button>
            <h2> Username </h2> {username}
            <h1>child component-MILAN</h1>
          </div>
      );

Answer 1

类组件

import React, { Component } from 'react';

export default class Admin extends Component {
  render() {
    const username = this.props.location.username;
    return (
      <div>
        <NavLink to="/" activeClassName="active">
          LOGOUT
        </NavLink>
        <br />
        <br />
        <Button>hello</Button>
        <h2> Username </h2> {this.username}
        <h1>child component-MILAN</h1>
      </div>
    );
  }
}

Answer 2

如果要继续使用功能组件，

import React from 'react';

// YOUR OTHER IMPORT GOES HERE

const Admin = ({ props }) => {
    console.log(props);
    const { username } = props.location;
    return (
        <div>
            <NavLink to="/" activeClassName="active">LOGOUT</NavLink>
            <br /><br />
            <Button>hello</Button>
            <h2> Username </h2> {username}
            <h1>child component-MILAN</h1>
        </div>
    )
}

类组件：

import React from 'react';
import { withRouter } from 'react-router';

// YOUR OTHER IMPORT GOES HERE

class Admin extends React.Component {
    componentDidMount() {
        console.log(this.props);
        const { username } = this.props.location;
    }
    render() {
        const { } = this.props.location.state
        return (
            <div>
                <NavLink to="/" activeClassName="active"> LOGOUT</NavLink>
                <br /><br />
                <Button>hello</Button>
                <h2> Username </h2> {username}
                <h1>child component-MILAN</h1>
            </div>
        )
    }
}

export default withRouter(Admin);

转换为类组件？

2 个答案: