将渲染属性传递给 React 组件中的子组件

huangapple
go评论103阅读模式
英文:

Pass render props to children in a React complement

问题

我有一个名为Pagination的组件，我想将多个属性传递给组件的子元素，类似于Headless UI菜单项上的active属性：

  1. <Menu.Item>
  2.   {({ active }) => (
  3.     <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
  4.       Account settings
  5.     </a>
  6.   )}
  7. </Menu.Item>

我想传递一个activeItem属性和itemsCount属性，并允许用户以任何他们想要的方式渲染它。一个示例实现可能是：

  1. <Pagination>
  2.   {({ activeItem, itemsCount }) => (
  3.     <span>{activeItem}</span>
  4.     <span>{itemsCount}</span>
  5.   )}
  6. </Pagination>

Pagination的基线组件如下：

  1. interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
  2.   children: React.ReactElement;
  3. }
  5. const Pagination = ({ children, ...rest }: PaginationProps) => {
  6.   const { state } = useLightboxContext();
  7.   return (
  8.     <div {...rest}>
  9.     </div>
  10.   );
  11. };

我该如何实现这个？

英文:

I have a component, called Pagination and I want to pass multiple props down to the children of the component, similar to active on the Menu item of Headless UI’s menu:

  1. &lt;Menu.Item&gt;
  2.   {({ active }) =&gt; (
  3.     &lt;a className={`${active &amp;&amp; &#39;bg-blue-500&#39;}`} href=&quot;/account-settings&quot;&gt;
  4.       Account settings
  5.     &lt;/a&gt;
  6.   )}
  7. &lt;/Menu.Item&gt;

I want to pass an activeItem prop and itemsCount prop, and allow users to render it in whatever way they want to. An example implementation could be:

  1. &lt;Pagination&gt;
  2.   {({ activeItem, itemsCount }) =&gt; (
  3.     &lt;span&gt;{ activeItem }&lt;/span&gt;
  4.     &lt;span&gt;{ itemCount }&lt;/span&gt;
  5.   )}
  6. &lt;/Pagination&gt;

And the baseline component for Pagination is:

  1. interface PaginationProps extends React.HTMLAttributes&lt;HTMLDivElement&gt; {
  2.   children: React.ReactElement;
  3. }
  5. const Pagination = ({ children, ...rest }: PaginationProps) =&gt; {
  6.   const { state } = useLightboxContext();
  7.   return (
  8.     &lt;div {...rest}&gt;
  9.     &lt;/div&gt;
  10.   );
  11. };

How can I do this?

答案1

得分: 1

如我在评论中提到的，这是实现的方式：

  1. function Comp({ children }) {
  2.   return children({ activeItem: 1, itemsCount: 2 });
  3. }
  5. function App() {
  6.   return (
  7.     &lt;Comp&gt;
  8.       {({ activeItem, itemsCount }) =&gt; (
  9.         &lt;p&gt;
  10.           {activeItem}, {itemsCount}
  11.         &lt;/p&gt;
  12.       )}
  13.     &lt;/Comp&gt;
  14.   );
  15. }

这将呈现出 1, 2。

英文:

As I mentioned in a comment, here is the way to do it:

  1. function Comp({ children }) {
  2.   return children({ activeItem: 1, itemsCount: 2 });
  3. }
  5. function App() {
  6.   return (
  7.     &lt;Comp&gt;
  8.       {({ activeItem, itemsCount }) =&gt; (
  9.         &lt;p&gt;
  10.           {activeItem}, {itemsCount}
  11.         &lt;/p&gt;
  12.       )}
  13.     &lt;/Comp&gt;
  14.   );
  15. }

This will render 1, 2.

huangapple
  • 本文由 发表于 2023年2月16日 04:56:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/75465360.html
  • javascript
  • react-props
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定