react-component / react-component/cascader

columnNodes 返回的子节点能否自定义?

Open
#256 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
233
Forks
149
Avg merge
10h 23m
Merged PRs (30d)
2

Description

  1. 因为这样容易让开发者自定义
  2. 扩展性更强
 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.