在 React 中渲染 Firebase 数据

Question

我希望将一些 firebase 数据呈现给 HomeFeed 组件。我在 componentDidMount 方法中更新状态。您可以在下面看到它的样子。这是一个数组。我应该使用 map 函数映射它吗？如何访问“标题”、“链接”、“类型”等特定信息才能呈现它？

非常感谢！

var React = require('react');
var Rebase = require('re-base');
var base = Rebase.createClass("https://nimbus-8ea70.firebaseio.com/");

// TODO: Render Firebase data to screen.

// Home
// <Home />
var HomeContainer = React.createClass({
    render : function() {
        return (
            <div className="homeContainer">
                <HomeFeed />
            </div>
        );
    }
});

// Home Feed
// <HomeFeed />
var HomeFeed = React.createClass({
    componentDidMount: function() {
        base.fetch('article', {
            context: this,
            asArray: true,
            then(data){
                console.log(data);
                this.setState({
                    feed: data
                })
            }
        });
    },
    getInitialState: function() {
        return {
            feed: []
        }
    }, 
    render : function() {
        return (
            <div className="homeFeed">
                {/* Use map function here? */}
            </div>
        );
    } 
});

module.exports = HomeContainer;

Answer 1

render 将在 state 更改时运行（除非您使用 shouldComponentUpdate 修改此行为），只要您正确使用 setState，您的组件就会在其状态更改时自动更新。

如果您特别询问如何将数组转换为 render 可以理解的内容，那么是的，map 是一种非常常见的方法。它可能看起来像这样：

render : function() {
    return (
        <div className="homeFeed">
            {this.state.feed.map(function(ea){
                return <div>{ea.someProperty}</div>
            })}
        </div>
    );
}

请注意，您必须将 ea.someProperty 包裹在花括号中，因为您基本上是将 JSX 插入到 JavaScript 表达式中在更多 JSX 中。 这种嵌套的 JSX/Expression/JSX 结构恐怕是你必须在 React 中适应的东西。

More about array.map