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

Question

我正在尝试显示帖子列表的文本预览。 我有一个主页博客页面中呈现的帖子列表，每个帖子仅显示标题，作者和锚标记，作为指向视图的链接，该视图显示包含包含所选帖子的所有数据的单个帖子。 现在在主页博客页面中，除了标题和作者之外，我需要显示帖子的文本预览，但是我不知道如何获取帖子内容的一部分并将其显示为预览。

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

Answer 1

由于我没有太多时间以花哨的方式解决此问题，因此我决定在集合中添加一个名为“ preview”的新字段。 在表单发布中，我添加了一个新的文本区域，该区域包含字符数，该区域将显示在Post.jsx <p>Preview:{preview}</p> 。