Question

您好我有这个组件和容器组件类，它有一些状态。我意识到我不再需要它来管理状态了，我想把它变成一个无用的组件，所以来自＆＃34;导出类LeftNavigation扩展了React.Component {＆＃34; to＆＃34; export const LeftNavigation：React.StatelessComponent = props =＆gt; {

import * as React from "react";
import { NavLink, Link } from 'react-router-dom';

export interface LeftNavigationProps {
    title: string;
    path: string;
}

export class LeftNavigationItem {
    title: string;
    path: string;

    constructor(title: string, path: string) {
        this.title = title;
        this.path = path;
    }
}

// 'LeftNavigationProps' describes the shape of props.
export class LeftNavigation extends React.Component<LeftNavigationProps, {}> {
    static items: Array<LeftNavigationItem> = [
        new LeftNavigationItem('On demand tests', '/ondemandtests'),
        new LeftNavigationItem('Fleet status',    '/fleetstatus'  )
    ];

    constructor(props: LeftNavigationProps) {
        super(props);
        this.state = { focused: 0 };
    }

    componentWillMount() {

    }

    render() {
        var self = this;

        return (
            <div className="sidebar-container">
                <div className="page-sidebar">
                    <div className="nav-menu-stack">
                        <Link className="active" to={this.props.path}>{this.props.title}</Link>
                        <div className='subnav-menu'> {
                            LeftNavigation.items.map(function(m, index) {
                                return <NavLink key={m.path} activeClassName="active" to={self.props.path + m.path}>{m.title}</NavLink>;
                            })
                        }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

试一试：

import * as React from "react";
import { NavLink, Link } from 'react-router-dom';

export interface LeftNavigationProps {
    title: string;
    path: string;
}

export class LeftNavigationItem {
    title: string;
    path: string;

    constructor(title: string, path: string) {
        this.title = title;
        this.path = path;
    }
}

const LeftNavigation = (props: LeftNavigationProps) => {
    const items: Array<LeftNavigationItem> = [
        new LeftNavigationItem('On demand tests', '/ondemandtests'),
        new LeftNavigationItem('Fleet status', '/fleetstatus')
    ];
    return (
        <div className="sidebar-container">
            <div className="page-sidebar">
                <div className="nav-menu-stack">
                    <Link className="active" to={props.path}>{props.title}</Link>
                    <div className='subnav-menu'> {
                        items.map(function (m, index) {
                            return <NavLink key={m.path} activeClassName="active"
                                            to={props.path + m.path}>{m.title}</NavLink>;
                        })
                    }
                    </div>
                </div>
            </div>
        </div>
    );
};

export default LeftNavigation;

请注意，它只是一个常规的旧函数，并且道具直接传入。没有this个关键字。此外，items在返回语句之前在函数本身内声明。

如何将此组件类转换为纯函数无状态组件（Typescript + React）

1 个答案: