如何在新类(扩展组件)格式中正确格式化JSX

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (88)

我想要一点代码智慧,而不是修复。我学会了一种反应方式,而且我看到了不同格式的代码。我正在努力学习差异。

我得到了这个jsx片段:

import React from 'react'
import { Route, Redirect } from 'react-router'
import { connect } from 'react-redux'
import * as reducers from '../reducers'

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
    <Route {...rest} render={props => (
        isAuthenticated ? (
            <Component {...props}/>
        ) : (
            <Redirect to={{
                pathname: '/login',
                state: { from: props.location }
            }}/>
        )
    )}/>
);

const mapStateToProps = (state) => ({
    isAuthenticated: reducers.isAuthenticated(state)
});

export default connect(mapStateToProps, null)(PrivateRoute);

代码工作得很好,但我试图理解它。我学到的课程是以课堂为基础的。

例如:

class Logout extends Component {
    componentDidMount() {
        this.props.dispatch(logout());
    }
    render() {
        return(<Redirect to="/" push={true} />);
    }
}

我对这段代码有两个问题:

  1. 这似乎是一个功能,是真的吗?
  2. 这应该是一个班级吗?如果是这样,它应该怎么读?

如果代码应该是一个类,并且我可以看到它应该是什么样子,那么我将知道如何将其余部分转换为正确编码。

谢谢

提问于
用户回答回答于
import React from 'react'
import { Route, Redirect } from 'react-router'
import { connect } from 'react-redux'
import * as reducers from '../reducers'

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
    <Route {...rest} render={props => (
        isAuthenticated ? (
            <Component {...props}/>
        ) : (
            <Redirect to={{
                pathname: '/login',
                state: { from: props.location }
            }}/>
        )
    )}/>
);

const mapStateToProps = (state) => ({
    isAuthenticated: reducers.isAuthenticated(state)
});

export default connect(mapStateToProps, null)(PrivateRoute);

这是一个功能组件。您也可以将其称为无状态组件。

这也可以写成基于类的组件/有状态组件,如下所示:

import React from 'react'
import { Route, Redirect } from 'react-router'
import { connect } from 'react-redux'
import * as reducers from '../reducers'

class PrivateRoute extends React.Component {
    render() {
        return (
            <Route {...rest} render={() => (
                isAuthenticated ? (
                    <Component {...this.props}/>
                ) : (
                    <Redirect to={{
                        pathname: '/login',
                        state: { from: this.props.location }
                    }}/>
                )
            )}/>
        );
    }
}

const mapStateToProps = (state) => ({
    isAuthenticated: reducers.isAuthenticated(state)
});

export default connect(mapStateToProps, null)(PrivateRoute);

选择明智地使用功能和基于类的组件。因为基于类的组件更重,因为它们具有生命周期钩子和状态,而功能组件只是业务逻辑。

我个人用的是什么?

我遵循这种模式。我将所有渲染逻辑保存在小型功能组件中,并将所有业务逻辑保存在基于类的组件中,该组件将成为功能组件的父级。

这是一个例子:

TestContainer.js

class TestContainer extends React {
    // state
    // lifecycle hooks
    // events
    // other functions
    render() {
        return <Test />; // pass any props here in Test
    }
}

export default TestContainer; // connect with redux store here (if you want)

Test.js

const Test = props => (
    // rendering logic
);

export default Test; // don't connect to redux store here. if you want something from redux store, then connect the parent to redux store and get data from parent(TestContainer) as props.

扫码关注云+社区

领取腾讯云代金券