遍历数组：ReactJS 对象作为 React 子对象无效

Question

 render() {
    var NewsCards = this.state.news.map((b,i)=>{
        return(
            <div key={i} className="row">
                <div className="col-10">
                    <img src={b.image} className="img-fluid"/>
                </div>
            </div>
        )
    })
    return (
        <div className="container-fluid global-container-bottom-padding">
            {RenderIf(this.state.loading)(
            <div id="cssload-pgloading">
                <div className="cssload-loadingwrap">
                    <ul className="cssload-bokeh">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            )}
            {RenderIf(!this.state.loading)(
                { NewsCards }
            )}
        </div>
    );
}

不太确定哪里出错了。

编辑：

this.state.news 是对象数组

[
    {
        "image":"imgurl",
        "link":"imglink"
    },
    {
        "image":"imgurl",
        "link":"imglink"
    }
]

Answer 1

问题出在这里，因为您错误地使用 object property shorthand syntax 创建了一个带有 NewsCard 字段的对象文字：

{RenderIf(!this.state.loading)(
  { NewsCards }
)}

请将您的代码更改为：

!this.state.loading && 
<div>
  {NewsCards}
</div>

或

{RenderIf(!this.state.loading)(
  <div>{NewsCards}</div>
)}

因为还没有准备好片段的支持，至少在 React 16 之前是这样。

遍历数组：ReactJS 对象作为 React 子对象无效

Looping over array: ReactJS Objects are not valid as a React child

jsx

reactjs

react-jsx