Question

我刚刚开始使用React，而且我正在构建一个包含大量静态内容的页面。我想知道是否有最佳做法可以做到这一点？在与朋友交谈后，他告诉我最好将这个静态页面的每个部分包装成单独的组件，但我真的没有看到这样做的好处，因为内容不是＆＃39 ;动态。

处理大量静态内容是否有良好的做法？这当前是页面文件夹中的一个组件。

render() {
    return (
        <div>
            <Navigation/> {/* Main Header */}
            <Jumbotron>
                <h1>Example Header</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
                <img src="placeholder.it/100" className="header__down-arrow" alt="Down Arrow"/>
            </Jumbotron>

            {/* Content Block 1 */}
            <TextBlock className="textBlock">
                <h2>Intro Title Here</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.
                </p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                    in culpa qui officia deserunt mollit anim id est laborum</p>
            </TextBlock>

            {/* Content Block 2 */}
            <TextBlock className="textBlock--yellow">
                <h2>Example Header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.
                </p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                    in culpa qui officia deserunt mollit anim id est laborum</p>

                {/* Terms and conditions */}
                <TermsConditions>
                    <p>Click Here to view Terms and Conditions</p>
                </TermsConditions>

            </TextBlock>
            <Footer/>

        </div>
    );
}

Answer 1

您可以考虑将静态内容存储在页面呈现之前读入的单独文件中（json，plaintext，markdown等）。这样可以更容易地将实际信息与其呈现方式分开。

React - 具有大量静态数据的页面的最佳实践？

1 个答案: