Question

我有以下包装类型的条件包装，我试图用条件包装替换以下条件

 render: (text) => {
    return (
      <ConditionalWrapper
        condition={isCheckedFn?.(text)}
        wrapper={(ch) => (
          <Badge count={<CheckCircleFilled style={{ color: 'green' }} />}>{ch}</Badge>
        )}
      >
        <ConditionalWrapper
          condition={isSelectable}
          wrapper={(ch) => (
            <Button type="link" onClick={() => action(ch)}>
              {ch}
            </Button>
          )}
        >
          {isEqual(searchedColumn, fieldName) && !isEmpty(searchText) ? (
            <Highlighter
              highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
              searchWords={[searchText]}
              autoEscape
              textToHighlight={text.toString()}
            />
          ) : (
            text
          )}
        </ConditionalWrapper>
      </ConditionalWrapper>
    );
  }

下面是条件包装组件

const ConditionalWrapper = ({ condition, wrapper, children }) =>
  condition ? wrapper(children) : children;

export default ConditionalWrapper;

然后我试图用条件包装器替换下面的渲染荧光笔

{isEqual(searchedColumn, fieldName) && !isEmpty(searchText) ? (
            <Highlighter
              highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
              searchWords={[searchText]}
              autoEscape
              textToHighlight={text.toString()}
            />
          ) : (
            text
          )}

然后它看起来像这样

render: (text) => {     
    return (
      <ConditionalWrapper
        condition={isCheckedFn?.(text)}
        wrapper={(ch) => (
          <Badge count={<CheckCircleFilled style={{ color: 'green' }} />}>{ch}</Badge>
        )}
      >
        <ConditionalWrapper
          condition={isSelectable}
          wrapper={(ch) => (
            <Button type="link" onClick={() => action(ch)}>
              {ch}
            </Button>
          )}
        >
         <ConditionalWrapper  // getting error in this conditional wrapper
            condition={isEqual(searchedColumn, fieldName) && !isEmpty(searchText)}
            wrapper={(text) =>
              (<Highlighter
              highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
              searchWords={[searchText]}
              autoEscape
              textToHighlight={text.toString()}
            />)
            }
            text
           />
        </ConditionalWrapper>
      </ConditionalWrapper>
    );
  },

此代码出现如下错误

<块引用>

错误：ConditionalWrapper(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，什么都不渲染，返回空。

我不知道我在上面的代码做错了什么，任何人都可以让我知道我做错了什么，这是使用条件包装器的正确方法。

非常感谢

Answer 1

我认为这是因为第三个 ConditionalWrapper 没有 children （我猜这是一个错字？因为 text 作为道具传递）。这样的事情应该可以工作

<ConditionalWrapper
  condition={isEqual(searchedColumn, fieldName) && !isEmpty(searchText)}
  wrapper={(ch) => (
    <Highlighter
      highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
      searchWords={[searchText]}
      autoEscape
      textToHighlight={ch.toString()}
    />
  )}
>
  {text}
</ConditionalWrapper>

获取渲染错误，就像渲染没有返回任何内容一样

1 个答案: