出现渲染错误，就像从渲染中没有返回任何内容一样答案

【问题标题】：getting render error like nothing was returned from render出现渲染错误，就像从渲染中没有返回任何内容一样
【发布时间】：2021-03-26 16:51:56
【问题描述】：

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

 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(...)：渲染没有返回任何内容。这通常意味着缺少返回语句。或者，什么也不渲染，返回空值。

我不知道我在上面的代码中做错了什么，谁能告诉我我做错了什么，这是使用条件包装器的正确方法。

在此先感谢

【问题讨论】：

还有什么不清楚的

标签： javascript reactjs conditional-statements

【解决方案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>

【讨论】：

感谢您的建议，而不是文本，我需要传递一些东西，我收到警告，例如 text 已经在上面定义 render:(text)
是的，对不起！可能最好的解决方案是简单地使用wrapper={(ch) => ( 而不是wrapper={(text) => (。这样，您将修复此警告并使其在所有 ConditionalWrapper 组件中保持一致
抱歉，我需要在哪里使用 ch，因为我在这里 textToHighlight={text.toString()} 使用 text.Tostring()，然后再将其转换为条件包装器
已编辑原始答案，现在应该清楚了 - 请注意 wrapper 是使用 ConditionalWrapper 组件的子级调用的。所以可能ch 是一个更好的名字