0
投稿一覧のテキストプレビューを表示しようとしています。ホームブログページにレンダリングされる投稿のリストがあり、各投稿には、タイトル、著者、アンカータグが、選択した投稿を含むすべてのデータを含む単一の投稿を表示するビューへのリンクとしてのみ表示されます。ホームブログのページでは、タイトルと著者に加えて投稿のテキストプレビューを表示する必要がありますが、投稿コンテンツの一部を取得してプレビューとして表示する方法はありません。Meteor + Reactのコレクションフィールドからテキストプレビューをレンダリングする方法は？
私は流星と反応の初心者です。もし誰かが私に助言を与えることができれば、それは素晴らしいだろう。私は記事のリストを見せる
Collections.jsxここ
export const Posts = new Mongo.Collection('Posts');
export const PostSchema = Astro.Class({
name: 'PostSchema',
collection: Posts,
fields: {
title: {
validator: Validators.and([
// more validators...
]),
},
content: { // I need to show a preview of this content
validator : Validators.and([
Validators.required(),
Validators.string(),
Validators.minLength(3)
])
},
author: {
validator: Validators.and([
// more validators
])
},
category: {
validator: Validators.and([
// more validators
])
},
tags: {
validator: Validators.and([
// more validators
])
},
}
});
されています。ここでは、コードです。
Blog.jsx
// other imports
import { Posts } from '../../lib/collections.jsx';
class Blog extends Component {
render() {
let content = (
<div>
<h1>Posts</h1>
{this.props.posts.map((post, idx) => (
<Post key={idx} post={post} />
))}
</div>);
if (!this.props.ready) {
content = <p>LOADING...</p>;
}
return content;
}
}
Blog.propTypes = {
ready: React.PropTypes.bool.isRequired,
posts: React.PropTypes.array.isRequired,
};
export default createContainer((params) => {
const handle = Meteor.subscribe('posts');
let posts = Posts.find({}, { sort: { createdAt: -1 } }).fetch();
if (params.category) {
posts = Posts.find({ category: params.category },
{ sort: { createdAt: -1 } }).fetch();
}
return {
ready: handle.ready(),
posts,
};
}, Blog);
/**
* POST
* Here is where I don't know how to show the text preview
*/
const Post = (props) => {
const {
title,
author,
slug,
category,
content,
} = props.post;
return (
<div>
<article className="new-resolution">
<p>Title:{title}</p>
<p>Author:{author}</p>
<p>{content}</p>
<a href={`/blog/kategorie/${category}/${slug}`}>
Weiter lesen...
</a>
</article>
</div>
);
};
Post.propTypes = {
post: PropTypes.object.isRequired,
};