18、React 高阶组件与菜单组件项目实践

React 高阶组件与菜单组件项目实践

1. React 高阶组件与扩展运算符的使用

1.1 扩展运算符传递属性

扩展运算符（ ... ）是 ES6+/ES2015+ 中用于数组的一部分，目前也有使用扩展运算符处理对象的提案。React 团队在 JSX 中添加了对扩展运算符的支持。

扩展运算符的作用是在元素中使用时，将对象的所有属性作为属性传递：

<Component {...obj}/>

在 load-website.jsx 中，使用扩展运算符将状态和属性变量传递给原始组件。因为无法提前知道函数将接受哪些属性作为参数，所以扩展运算符可以一次性传递所有数据。

在 React 和 JSX 中，可以使用多个扩展运算符，也可以将它们与传统的 key=value 属性声明混合使用。例如：

<Component {...this.state} {...this.props} className="main" />

以下是一个包含子元素的示例：

class DoneLink extends React.Component {
  render() {
    return <a {...this.props}>
      <span cl