React JSX无法访问div中的变量

Question

I'm currently rendering a list which I've defined in the render method, like so

        render() {
            var listDisplay = items.map((item, i) => {
                ....
            }

            return (
                <TabPanel>
                    <Scrollbars>
                        {listDisplay}
                    </Scrollbars>
                </TabPanel>
            )
        }

This works as intended and the listDisplay shows up correctly. However, when I surround the Scrollbars with <div> , nothing shows up.

I feel like I might be missing something obvious, but right now I have no clue what's going on. Any ideas?

Answer 1

As one of the comments above suggested, it was a layout issue rather than being unable to access the variable. In this case, using <div> tags around the Scrollbar component alters the layout. Getting rid of it fixed the problem.