Question

我正在学习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 => }？

谢谢。

Answer 1

{... rest}是对对象引用的破坏：https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 在react中，您可以将组件编写为Component类的扩展（托管组件），也可以编写为PureComponent或Functional Component的扩展（非托管组件）。您要的是一个功能组件。销毁是ES6的功能，而组件是react的功能，您可以在react官方文档中找到所有信息和模式。

Answer 2

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

Spread语法允许迭代，例如数组表达式或字符串扩展到零个或多个参数的地方（对于函数调用）或元素（用于数组文字）或对象将表达式扩展到零个或多个键值对的地方（用于对象文字）。

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

关于第二个问题-基本上是render props pattern。解释很长，请参见docs。但是基本上发生的是，Route组件将一个函数用作其render道具，而该函数的责任是根据传递给它的props呈现某些内容。

了解React代码

2 个答案: