javascript - ReactJS return 语句中出现意外标记

Question

如果上下文变量设置为无，我不想返回任何内容。

但是我在 if 上得到了意外的标记？

return (
    <AppContext.Consumer>
        {context => (
            if(context.objects[0] !== "none")
                return;
            <ul>
              {context.objects.map((object, key) => {
                  return <li key={key}>{object.type}
//--- snip ----

编辑:整个(工作)组件代码是这样的

const ObjectList = (props) => {

    return (
        <AppContext.Consumer>
            {context => (
                <ul>
                  {context.objects.map((object, key) => {
                      return <li key={key}>{object.type}&nbsp;
                            <Button
                                key={key}
                                style={{backgroundColor: "red"}}
                                onClick={() => context.deleteObject(key)}
                            >
                                x
                            </Button>
                        </li>
                   })}
                </ul>
            )}
        </AppContext.Consumer>
    );
}

但这总是渲染 1 li 元素，因为对象在上下文提供程序中初始化时没有“none”作为元素:

const [objects, setObjects] = useState(['none']);

我希望仅当对象数组中存在“无”以外的内容时才绘制列表。

Answer 1

使用return null而不是仅仅return。

请参阅此问题了解更多信息:Is it possible to return empty in react render function?