理解React代码[重复]

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}）和这里

为什么呈现（）看起来像这个呈现={props=

谢谢大家。




Answer 1

要回答第一个问题，请使用对象扩展运算符，引用MDN：

扩展语法允许在预期零个或多个参数（用于函数调用）或元素（用于数组文字）的位置展开iterable，例如数组表达式或字符串，或者在预期零个或多个键值对（用于对象文字）的位置展开object表达式。

在您的例子中，它所做的是将所有的props（除了组件）作为props传递给组件。

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

Answer 2

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