Question

我没有使用React Router，只是具有一些条件来显示和隐藏某些组件。

  return (<div className={classes.content}>
     { Navigation[this.state.view] && Navigation[this.state.view].selected === 'colors' && <Colors /> }
     { Navigation[this.state.view] && Navigation[this.state.view].selected === 'typography' && <Typography /> }
     { Navigation[this.state.view] && Navigation[this.state.view].selected === 'decoration' && <Decoration /> }
     { Navigation[this.state.view] && Navigation[this.state.view].selected === 'footer' && <Footer /> }
</div>)

这将调用每个组件内部的componentDidMount并满足这些条件的次数。您能指出我显示和隐藏组件的方式出什么问题吗？

Answer 1

解决问题的一种方法是将地图存储到类中或渲染器外部任何变量中的页面。初始化变量时，需要将该组件包装成函数，以使其不挂载。

这可以在您的构造函数中完成，例如：

this.pages = {
    colors: () => <Colors/>,
    typography: () => <Typography/>,
    decoration: () => <Decoration/>,
    footer: () => <Footer/>
}

现在，在渲染中，只需取出要加载的导航页面名称，从JSON对象中提取正确的一个，然后调用该函数即可渲染正确的元素，而无需加载其他元素：

const nav = Navigation[this.state.view]

return (
    <div className={classes.content}>
        {nav && this.pages[nav.selected]()}
    </div>
)

Answer 2

我认为这是因为您每次满足这些条件时都会创建一个react元素。因此，我相信您可以通过一次创建这些组件并根据需要返回它们来解决此问题。

所以您需要这样的东西：

class Something extends Component {
    constructor() {
        this.pages = {
            colors: <Colors />,
            typography: <Typography />
        }
    }

    render() {
        return (
            <div className={classes.content}>
                { Navigation[this.state.view] && Navigation[this.state.view].selected === 'colors' && this.pages.colors }
                { Navigation[this.state.view] && Navigation[this.state.view].selected === 'typography' && this.pages.typography }
            </div>
        )
    }
}

（您还可以根据需要实现一些延迟加载行为，以创建createElements并返回以前创建的元素）

反应条件组件多次安装

2 个答案: