Question

我正在考虑在我的网站上使用ReactJS构建静态博客，以便更熟悉框架和最佳实践。我一直在浏览文档和这里提出的问题，但无法找到我想要具体做的信息（这可能表明这是一个坏主意或反模式，但无论如何我都会问。）

我希望有一个Blog类来组成各个帖子（只是React类）并显示它们。在显示之前，我想对帖子进行排序，并可能在将来做其他事情。这个和文档的评论教程之间的重要区别是博客的“数据”不是来自某些外部json文件或数据库;它只是页面上的其他React类。

我想在单独的文件中编写各个博客类，并将它们放在一些全局数组中供主Blog类使用。类似的东西：

var Blog = React.createClass({
   getInitialState: function() {
     return {posts:window.__posts}
   },
   render: function() {
     var posts = {};

     this.state.posts.forEach(function(post) {
       var postCls = post();
       posts[_.uniqueId()] = postCls;
     });

     return (
       <div className="section-content">
         { posts }
       </div>
     );
   }
 });

我的个人博客课程如下：

    var MyFirstBlogPost = React.createClass({
      displayName: 'MyFirstBlogPost',
      getDefaultProps: function() {
        return {
          date: 1406834820,
          tags: [window.__postTags.aPost]
        };
      },
      render: function() {
        return (
          <article className="post">
            My First Blog Post
          </article>
        );
      }
    });

    window.__posts.push(MyFirstBlogPost);

我的问题是在呈现它们之前从各个博客文章中获取道具和/或状态。当我写出来时，感觉就像一个错误的方法，我想要访问的数据不应该按照我的方式存储 - 我希望数据（从getDefaultProps返回的对象）可用于单个帖子以及博客课程。

我是否需要将此“元”信息存储在React结构之外？我应该在Blog类中维护它并传递它吗？这种方法的问题是Blog类不知道它包含哪些特定的博客文章 - 所以它不能轻易地将元信息映射到正确的帖子而中间没有某种层。

让我走上正确轨道的任何建议或提示？

Answer 1

从个别博客帖子
获取道具和/或州

通过反应，一切都自上而下，从根组件到最低跨度。因此，虽然你可以传递数据，但你不能把它拿出来。

你在这里采取的方法有点奇怪。如果没有明显改变它，我相信这是让它可以访问的唯一方法：

jsbin

var MyFirstBlogPost = React.createClass({
  displayName: 'MyFirstBlogPost',
  statics: {
    date: 1406834820,
    tags: [window.__postTags.aPost]
  },
  render: function() {
    return (
      <article className="post">
        My First Blog Post {new Date(MyFirstBlogPost.date).toString()}
      </article>
    );
  }
});

window.__posts.push(MyFirstBlogPost);

请注意，渲染它的组件不能覆盖它......但它不应该是因为这是数据。

使用子类而不是外部数据的组合

1 个答案: