如何在Meteor + React中从集合字段渲染文本预览？

Question

I'm trying to show a text preview for a list of posts. I have a list of posts that are rendered in the home blog page, each post only shows title, author and an anchor tag as a link to a view that shows a single post with all the data that contains the selected post. Now in the home blog page I need to show a text preview of the post in addition to title and author but I don't have any idea of how to grab a part of the post content and show it as a preview.

I'm a beginner with Meteor and React. If someone could give me some advise, it would be great. Here is the code:

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
    ])
  },
 }
});

Here is where I show the posts list.

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,
};

Answer 1

Since I din't have to much time to resolve this in a much fancy way, I just decide to add a new field in my collection named "preview". In the form post I added a new text area with a limit of characters and this would be displayed in the Post.jsx <p>Preview:{preview}</p> .