feat: children support renderProps #591
Conversation
过程分析Trigger 组件扩展了 children 属性，现在支持渲染函数模式。当 children 为函数时，接收包含 变更
序列图sequenceDiagram
participant Parent as 父组件
participant Trigger
participant RenderFn as children 函数
participant DOM
Parent->>Trigger: 传入 children 函数 + popupVisible={true}
Trigger->>Trigger: 计算 mergedOpen = true
Trigger->>RenderFn: 调用 children({ open: true })
RenderFn-->>Trigger: 返回 ReactElement
Trigger->>DOM: 渲染子元素
DOM-->>Parent: 显示结果
审查工作量估计🎯 2 (简单) | ⏱️ ~10 分钟
可能相关的 PR
建议审查者
诗歌
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @zombieJ, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a significant enhancement to the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #591 +/- ##
==========================================
+ Coverage 96.41% 96.42% +0.01%
==========================================
Files 17 17
Lines 948 952 +4
Branches 278 281 +3
==========================================
+ Hits 914 918 +4
Misses 34 34 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces support for render props for the children prop, allowing the child component to be aware of the trigger's open state. The implementation in src/index.tsx is clean and uses React.useMemo effectively to handle the new render prop functionality. The type definitions have been updated accordingly, and a new test case has been added to verify the feature. Overall, this is a great addition. I have one suggestion to enhance the test coverage for this new feature.
| describe('children renderProps', () => { | ||
| it('should get current open', () => { | ||
| const { container } = render( | ||
| <Trigger | ||
| popupVisible={true} | ||
| popup={<span>Hello!</span>} | ||
| > | ||
| {({ open }) => <button>{String(open)}</button>} | ||
| </Trigger>, | ||
| ); | ||
|
|
||
| const button = container.querySelector('button'); | ||
| expect(button.textContent).toBe('true'); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
The added test case is a good start for verifying the render prop functionality. To make the tests more comprehensive, I suggest covering both controlled and uncontrolled component scenarios, as well as state transitions from open to close and vice-versa. This will ensure the open state is correctly propagated to the child in all situations.
describe('children renderProps', () => {
it('should get current open state and update for controlled component', () => {
const { container, rerender } = render(
<Trigger popupVisible={false} popup={<span>Hello!</span>}>
{({ open }) => <button>{String(open)}</button>}
</Trigger>,
);
const button = container.querySelector('button');
expect(button.textContent).toBe('false');
rerender(
<Trigger popupVisible={true} popup={<span>Hello!</span>}>
{({ open }) => <button>{String(open)}</button>}
</Trigger>,
);
expect(button.textContent).toBe('true');
});
it('should update with action for uncontrolled component', () => {
const { container } = render(
<Trigger action={['click']} popup={<span>Hello!</span>}>
{({ open }) => <button>{String(open)}</button>}
</Trigger>,
);
const button = container.querySelector('button');
expect(button.textContent).toBe('false');
fireEvent.click(button);
act(() => jest.runAllTimers());
expect(button.textContent).toBe('true');
fireEvent.click(button);
act(() => jest.runAllTimers());
expect(button.textContent).toBe('false');
});
});![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/basic.test.jsx (1)
371-385: 测试覆盖了基本功能，但建议增加更多场景。当前测试验证了
popupVisible={true}时 render-prop 能正确接收{ open: true }。建议添加以下测试用例以提高覆盖率：
- 测试
open状态变化时子组件能正确更新- 测试非受控模式下通过 action 触发状态变化的场景
describe('children renderProps', () => { it('should get current open', () => { const { container } = render( <Trigger popupVisible={true} popup={<span>Hello!</span>} > {({ open }) => <button>{String(open)}</button>} </Trigger>, ); const button = container.querySelector('button'); expect(button.textContent).toBe('true'); }); + + it('should update when open state changes', () => { + const { container, rerender } = render( + <Trigger + popupVisible={false} + popup={<span>Hello!</span>} + > + {({ open }) => <button>{String(open)}</button>} + </Trigger>, + ); + + expect(container.querySelector('button').textContent).toBe('false'); + + rerender( + <Trigger + popupVisible={true} + popup={<span>Hello!</span>} + > + {({ open }) => <button>{String(open)}</button>} + </Trigger>, + ); + + expect(container.querySelector('button').textContent).toBe('true'); + }); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/index.tsx(2 hunks)tests/basic.test.jsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
src/index.tsx (2)
53-55: 类型定义清晰，支持 render-prop 模式。类型定义正确地扩展了
children以支持函数形式，参数{ open: boolean }能够让子组件响应 Trigger 的打开状态。
313-322: 实现正确，使用 useMemo 是合适的选择。使用
useMemo来处理 render-prop 是正确的，因为当mergedOpen状态变化时需要重新计算子节点。React.Children.only确保了单子节点约束。一个小提示：如果使用方传入内联函数作为 children（如
{() => <Button />}），每次父组件渲染都会导致useMemo重新计算。建议在文档中说明，对于需要优化性能的场景，使用方可以用useCallback包裹函数。
ref https://github.com/react-component/tooltip/pull/509/files#r2567392550
Summary by CodeRabbit
发布说明
✏️ Tip: You can customize this high-level summary in your review settings.