如何使用 jsx 在 reactjs 1.0 中渲染对象数组？

Question

我有以下内容：

var repos = [{"keya":"vala","keyb":"valb"},{"keya":"vala","keyb":"valb"},{"keya":"vala","keyb":"valb"}]

在我的反应组件代码中：

var React = require('react');

var Repos = React.createClass({
    propTypes: {
        username: React.PropTypes.string.isRequired,
        repos: React.PropTypes.array.isRequired
    },
    render: function() {
        return (
            <div> REPOS<br />
                Username: {this.props.username} <br />
                Repos: {this.props.repos}           
            </div>
        )
    }
});

module.exports = Repos;

我看到了： {this.props.repos} returns 以上，但我得到一个错误：

Uncaught Error: Invariant Violation: Objects are not valid as a React child... check the render method.

我该如何解决这个问题？有没有一种方法可以在没有 iterating/looping 的情况下输出所有内容？我知道我可以在 AngularJS 中这样做，但我不明白为什么 React 给我带来了困难。

我使用的是最新版本的react；我不认为这是 0.13 的问题。

Answer 1

将其字符串化：

{JSON.stringify(this.props.repos)}

Answer 2

这取决于您希望如何显示 HTML 中的值。

你可以做类似

render: function() {
    return (
        <div> REPOS<br />
            Username: {this.props.username} <br />
            Repos:
            {this.props.repos.map(function(repo){
              return <div><span>{repo.keya}</span></div>;
            }}           
        </div>
    )
}

通常，您想要遍历值数组和 return 它的 HTML 表示。这就是为什么你会收到你提到的错误，React 不提供对象的默认 HTML 表示，因此它无法知道如何显示你的数组。

如果您只想将其显示为文本，那么另一个答案中的 stringify 方法是可行的方法。但是，如果您期望格式良好的输出，则必须遍历数组。

如何使用 jsx 在 reactjs 1.0 中渲染对象数组？

How to render array of objects in reactjs 1.0 with jsx?

reactjs

react-jsx