Question

使用React 16，我们现在可以使用片段并返回一个元素/组件数组，而不用div包装它。我的问题是，我们可以为了克隆数组中的每个元素等目的而迭代返回的数组吗？

例如，假设我有以下组件：

import React, { Component } from 'react';

class Comp extends Component {
    render() {
        return <div>Comp</div>
    }
}

class Comps extends Component {
    render() {
        return [
            <Comp key='2'/>,
            <Comp key='2'/>,
            <Comp key='2'/>,
            <Comp key='2'/>
        ];
    }
}

我想做这样的事情：

class Lol extends Component {
    render() {
        const lol = <Comps />;
        return lol.map(x => React.cloneElements(x, {
            className: 'lol'
        }));
    }
}

Answer 1

React组件仍然是本机js类，所以 - 是的，你可以这样做，但事实是 - 你不应该这样做。

这是一种hacky方式，这是一个明显的反模式应该避免：

class Hello extends React.Component {
  render() {
    return [
      <h1>Hello</h1>, 
      <h1>World</h1>
    ];
  }
}

const App = () => {
  const Headers = new Hello().render()

  return (
    <div>
    {
      Headers.map(Header => React.cloneElement(Header, { className: 'lol' }))
    }
    </div>
  )
};

直播示例：https://codesandbox.io/s/3yj69vqpz6

更好的方法是将组件列表移动到返回组件数组的纯函数。

const Headers = () => (
  [
    <h1>Hello</h1>,
    <h1>World</h1>
  ]
)

const App = () => {
  return (
    <div>
      { /* you can map it because it is an array */}    
      { Headers().map(Header => React.cloneElement(Header, {className: 'lol' })) }

      { /* you can use it as a component */}
      <Headers />
    </div>
  )
}

直播示例：https://codesandbox.io/s/jl0m70yq35

反应克隆片段

1 个答案: