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

由于我没有多少时间以一种非常奇特的方式解决这个问题，我只是决定在我的收藏中添加一个名为＆＃34; preview＆＃34;的新字段。在表单帖子中，我添加了一个带有字符限制的新文本区域，这将显示在Post.jsx <p>Preview:{preview}</p>中。

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

1 个答案: