Question

我有一个名为＆＃34的图像组件;侧边栏＆＃34;在一个文件和一个主要内容组件中，＆＃34; Main＆＃34;在另一个。我将它们都渲染到另一个名为＆＃34;搜索的文件中的另一个组件中。＆＃34;唯一的问题是，因为图像加载速度较慢，所以＆＃34; Main＆＃34;得到后面的＆＃34;侧边栏＆＃34;。我知道我应该使用componentDidMount或componentWillMount或其他东西，但我不了解如何使用它的React文档，因为它们没有为这些提供示例。有人可以用以下代码告诉我如何做到这一点吗？

Sidebar.jsx

export default class Sidebar extends React.Component {
    render() {
        return (
            <div style = {{display: 'flex',
                           flexDirection: 'row',
                           position: 'absolute',
                           top: 0,
                           left: 0}}>
                <BackgroundImage/>
                <Nav/>
                <Logo/>
            </div>
        );
    }
}

Main.jsx

export default class Main extends React.Component {
    render() {
        return (
                <div style ={{height: 900, width: 900, backgroundColor: 'yellow'}}/>
        )
    }
}

Search.jsx

export default class Search extends React.Component {
    componentWillMount() {
        console.debug('componentWillMount');
    }
    render() {
    return (
        <div style = {{display: 'flex', flexDirection: 'row'}}>
            <Sidebar/>
            <Main/>
        </div>
    );
  }
}

谢谢！

Answer 1

我解决了这个并且不确定其中哪一个做了伎俩，但显然我也有位置：'绝对'在另一个文件中搞砸了，所以我把它拿出来然后在搜索页面中使用flexBox连续渲染组件。谢谢你的帮助！

如何在ReactJS中首先渲染图像组件？

1 个答案: