cascader icon indicating copy to clipboard operation
cascader copied to clipboard

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

Open lqPrototype opened this issue 2 years ago • 0 comments

  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>
);


lqPrototype avatar Mar 10 '22 10:03 lqPrototype