如何在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> 。