如何创建一个名为Tail的组件，该组件接受一个数字并呈现最后N个子元素

import React from 'react';

const Tail = ({ number, children }) => {
  // 在这里实现逻辑
  return (
    <div>
      {/* 在这里呈现最后N个子元素 */}
    </div>
  );
};

export default Tail;

import React, { Children } from 'react';

const Tail = ({ number, children }) => {
  const childrenArray = Children.toArray(children);
  
  // 在这里实现逻辑
  return (
    <div>
      {/* 在这里呈现最后N个子元素 */}
    </div>
  );
};

export default Tail;

import React, { Children } from 'react';

const Tail = ({ number, children }) => {
  const childrenArray = Children.toArray(children);
  const tailChildren = childrenArray.slice(-number);
  
  // 在这里实现逻辑
  return (
    <div>
      {/* 在这里呈现最后N个子元素 */}
    </div>
  );
};

export default Tail;

import React, { Children } from 'react';

const Tail = ({ number, children }) => {
  const childrenArray = Children.toArray(children);
  const tailChildren = childrenArray.slice(-number);
  
  // 在这里实现逻辑
  return (
    <div>
      {tailChildren.map((child, index) => (
        <div key={index}>{child}</div>
      ))}
    </div>
  );
};

export default Tail;

import React from 'react';
import Tail from './Tail';

const App = () => {
  return (
    <div>
      <h1>示例应用</h1>
      <Tail number={3}>
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
        <div>子元素4</div>
        <div>子元素5</div>
      </Tail>
    </div>
  );
};

export default App;