1

我正在学习 React.js。我熟悉下面的代码

class Login extends Component {
    state = { email: '',};
    render = () => {
        return (//some JSX code);
    }
}

但是我得到了以下代码作为问题的解决方案。

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

我无法理解上面的代码。谁能帮我理解？

这是什么{...rest}？

我知道传播运算符。为什么我在这里({ component: Component, ...rest })和这里 传递它<Route {...rest}？它在这两个地方做什么？

为什么render()是这样的render={props => }？

谢谢大家。

4

2 回答 2

1

{...rest} is a destructuration of an object ref: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment In react you can write component as extension of Component class (managed component) or as extension of PureComponent or Functional Component (unmanaged component). The one you are asking for is a Functional Component. Destructuring is an ES6 feature, while components are react's feature and you can find all info and patterns in react official doc.

于 2018-08-10T12:27:50.570 回答
0

要回答您的第一个问题 - 它是Object spread operator，引用MDN：

扩展语法允许在预期零个或多个参数（对于函数调用）或元素（对于数组字面量）的地方扩展诸如数组表达式或字符串之类的可迭代对象，或者在零个或多个参数的地方扩展对象表达式键值对（用于对象文字）是预期的。

在您的情况下，它所做的是PrivateRoute组件将所有道具（除了component）作为道具传递给Route组件。

关于第二个问题 - 这基本上是渲染道具模式。请参阅文档以获取解释，因为它很长。但基本上发生的情况是Route组件将一个函数作为其renderprop，而该函数的职责是根据props传递给它的内容呈现一些内容。

于 2018-08-10T12:36:12.087 回答