Question

我创建了一个包含三个帖子的博客，最初显示为三张卡片，用户可以点击这些帖子以呈现与卡片匹配的帖子组件。现在，我正在使用减速器来提取每张帖子中使用的必要细节。

这是我的问题：我使用三个单独的帖子组件（Post1，Post2和Post3），它们充当每个Route标签中使用的组件。但是，我想让我的代码更加动态，并能够在每个Route标记中呈现一般的post组件，并以某种方式使用来自特定reducers对象的信息填充post组件，该对象已经用于提取要在每张卡中使用的信息。

所以，我希望能够写出这样的东西：

<Route exact exact path={`Post1`} component={Post}/>

然后，当点击相应的卡时，不知何故Post的特定实例将使用reducer对象专门为Post1渲染Post。

有什么方法可以做到吗???

这是我的App.js代码：

class App extends React.Component {
    render() {
        const blogPosts = {
            Post1,
            Post2,
            Post3
        };

        var createRoutes = this.props.cards.map((card, i) => {
            return <Route key={i} exact path={`/${card.title}`} exact component={blogPosts[card.id]}/>
        });
        return(
            <Switch>
                <Route exact path='/' component={PostCards}/>
                {createRoutes}
            </Switch>
        );
    }
}

function mapStateToProps(state) {
    return {
        cards: state.cards
    }
}

export default withRouter(connect(mapStateToProps)(App));

以下是我的卡片代码：

class PostCards extends React.Component {
    render() {
        var createCards = this.props.cards.map((card, i) => {
            return (
                <div style={{margin: '20px'}} key={i}>
                    <Link to={`/${card.title}`}>
                        <PostCard title={card.title} subtitle={card.subtitle} date={card.date} text={card.text} backgroundImage={card.image} detail={card.detail}/>
                    </Link>
                </div>
            );
        });
        return (
            <div style={{display: 'flex', flexDirection: 'row'}}>{createCards}</div>
        );
    };
}

function mapStateToProps(state) {
    return {
        cards: state.cards
    };
}

export default connect(mapStateToProps)(PostCards);

Post（Post1）的代码示例：

const Post1 = () => {
    return (
        <div>hello this is post 1</div>
    );
}

export default Post1;

和reducer的代码：

export default function() {
    return [
        { id: 'Post1', 
          title: 'Post1', 
          subtitle: 'subtitle', 
          date: '1.1.17', 
          text: 'this is the post text for post 1', 
          image: 'url("../client/images/image.jpg")',
          detail: 'this is the detail'
        },

        { id: 'Post2', 
          title: 'Post2', 
          subtitle: 'subtitle', 
          date: '2.1.17', 
          text: 'this is the post text for post 2',
          image: 'url("../client/images/image.jpg")',
          detail: 'this is the detail'
        },

        { id: 'Post3', 
          title: 'Post3', 
          subtitle: 'subtitle', 
          date: '3.1.17', 
          text: 'this is the post text for post 3',
          image: 'url("../client/images/image.jpg")',
          detail: 'this is the detail'
        },
    ]
}

Answer 1

您可以使用帖子ID作为查询参数创建路线：

sendCommand({data:"do something"})
.then(function(data) {
    console.log(data);
    return sendCommand({data:"do something else "})
})
.then(function(data) {
    console.log(data);
})

然后在组件<Route path='/:postId' component={Post}/>中，您可以获取url参数，并根据其值确定您需要从商店中获取哪些数据：

Post

如何，使用react-router-dom，我可以指示一个链接来呈现一个普通的帖子组件，填充道具？

1 个答案: