react-component / react-component/cascader
columnNodes 返回的子节点能否自定义?
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 233
- Forks
- 149
- Avg merge
- 10h 23m
- Merged PRs (30d)
- 2
Description
- 因为这样容易让开发者自定义
- 扩展性更强
const mergedOptionColumns = isEmpty ? [{ options: emptyList }] : optionColumns;
const columnNodes: React.ReactElement[] = mergedOptionColumns.map(
(col, index) => {
const prevValuePath = activeValueCells.slice(0, index);
const activeValue = activeValueCells[index];
// return item
const custormRenderColumnItem = this.props?.custormRenderColumnItem;
const isCustormRenderItem =
custormRenderColumnItem &&
typeof custormRenderColumnItem === "function";
if (isCustormRenderItem) {
const CustormRenderColumnItem = custormRenderColumnItem();
return (
<CustormRenderColumnItem
key={index}
{...columnProps}
prefixCls={mergedPrefixCls}
options={col.options}
prevValuePath={prevValuePath}
activeValue={activeValue}
/>
);
}
return (
<Column
key={index}
{...columnProps}
prefixCls={mergedPrefixCls}
options={col.options}
prevValuePath={prevValuePath}
activeValue={activeValue}
/>
);
}
);
// >>>>> Render
return (
<div
className={classNames(`${mergedPrefixCls}-menus`, {
[`${mergedPrefixCls}-menu-empty`]: isEmpty,
[`${mergedPrefixCls}-rtl`]: rtl,
})}
ref={containerRef}
>
{columnNodes}
</div>
);
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the component code that builds columnNodes and the existing Column rendering shown in the issue. Trace how the current column item is selected and rendered, then review the surrounding props and usage before defining the customization scope; done should be demonstrated by columnNodes rendering the requested custom child nodes without breaking the default Column path.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100