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}会返回上述内容，但我收到错误：

未捕获错误：不变违规：对象作为React子对象无效...请检查渲染方法。

我如何解决这个问题？有没有办法只输出所有内容而不迭代/循环每一个？我知道我可以在AngularJS中这样做，但我不明白为什么反应让我很难过。

我正在使用最新版本的反应;我不认为这是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>
    )
}

通常，您希望迭代值数组并返回它的HTML表示形式。这就是为什么你得到你提到的错误，React不提供对象的默认HTML表示，所以它不知道如何显示你的数组。

如果您只想将其显示为文本，则另一个答案的stringify方法即可。但是如果你期望一个非常格式化的输出，你将不得不迭代数组。

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

2 个答案: