Question

我有一个CMS应用程序流程，其中用户具有他们创建的内容的提要，并且在那些单独的文档中，标题中具有一个链接，用于隔离和查看单个文档。

我正在迁移我的网站，以使用react和react-router来处理所有视图，我不确定处理此组件路由器链接和呈现的最佳实践。目前，我还没有遵循DRY，而是通过将文档标题中的链接路由到某个组件，该组件是提要中呈现的组件的直接副本，但是名称不同。

我觉得我可以在api提取和标头上使用条件语句来消除DRY并简化设置，但是我仍然习惯于React-Router的理念，并且不确定最佳方法。

预期的路由：/api (feed of content) => /api/blog/:blogId (individual blog post)

这是当前层次结构：

ActivityFeed (Api call and set state)
    ->Card
        ->Head
        ->Body (Router Link to individual document)
            ->ViewBlog
                ->Head
                ->Body
                ->Footer
        ->Footer

ActivityFeed.js：

/GET /api and set to state
export default class ActivityFeed extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || { 
            annotations: [], 
        }
    }

    fetchList() {
        fetch('/api')
            ...
    }

    render() {  
            return (
                <Card {...this.state} />
            )
    }
}

Card.js：

import Body from './Body';
import Footer from './Footer';
import Head from './Head';

//Card
export default class Card extends React.Component {
    render() {
        <Head/>
        <Body title={this.props.title} linkId={this.props.blogIdHash} blog={this.props.blog} />
        <Footer/>
    }
}

Body.js：

import ViewBlog from '../../../Blog/ViewBlog';

//Card - Body
export default class Body extends React.Component {
    render() {
        <Router>
            <div>
                <div className="row d-flex p-1">
                    <div className="col-md-12">
                        <h3> <Link to={`/api/blog/${this.props.linkId}`} params={{ blogId: this.props.linkId }} className={"text-" + type}>{this.props.title}</Link></h3>
                    </div>
                </div>
                ...
            </div>
        <Route name="blogs" path='/api/blog/:blogId' component={ViewBlog} />
        </Router>
    }
}

ViewBlog.js：

重复的Card.js，只是在不同的位置，并且标题中没有链接。

基于正确参数的路由和组件渲染

0 个答案: