了解 React 代码 [重复]答案

【问题标题】：Understanding React Code [duplicate]了解 React 代码 [重复]
【发布时间】：2019-01-18 01:30:43
【问题描述】：

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

谢谢大家。

【问题讨论】：

{...rest} 被称为spread syntax。当您编写 render={props => ... } 时，您正在为 render 属性提供一个函数。如果你写render={(props) => { return ... }}，一开始它可能看起来更明显

标签： reactjs react-router-v4 react-component react-router-component

【解决方案1】：

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

【讨论】：

感谢@Mose Raguzzini。我想了解更多关于功能组件的信息。你能在这方面帮助我吗？
我们开始吧：reactjs.org/docs/components-and-props.html。 React 的文档做得非常好:)

【解决方案2】：

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

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

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

关于第二个问题 - 这基本上是render props pattern。请参阅docs 以获得解释，因为它很长。但基本上发生的情况是Route 组件将一个函数作为其render 属性，该函数的职责是根据传递给它的props 渲染一些内容。

【讨论】：