React视图在React 0.14中不渲染
React View is not rendered in React 0.14
我尝试迭代一个对象,并在React 0.14中动态创建表行,如下面的
var msg = React.createClass({
render: function() {
var profiles = [];
$.map(profs, function(prof){
profiles.push(<tr>
<td>{prof.Name}</td>
<td>{prof.Type}</td>
</tr>)
,并尝试在
中添加这个<table>
<tbody>
{profiles}
</tbody>
</table>
但它是不呈现和不抛出任何错误也。我渲染成
ReactDOM.render(React.createElement(msg, {data: this.model.attributes}), this.el);
如果我删除"{profiles}
",它将正确呈现页面的其他部分。但如果我使用相同的代码在React 0.13.2与
React.render(React.createElement(msg, {data: this.model.attributes}), this.el);
工作正常。如果有人建议调试这些错误的工具,那将会更有帮助。
刚刚完成我的应用程序升级到0.14,当组件本身或它的一个子组件有一个未定义的mixin时,我遇到了渲染无声失败。在我的例子中,它是react-router的废弃mixins…但我花了很长时间才弄明白。React通常会很优雅地处理未定义或空值,或者至少会发出警告,但在mixins上显然不是这样。
我认为问题在于您的第一个代码示例中的map
方法从未关闭:最终的)
关闭push
,这使得map
及其回调(即function(prof)
)未关闭。
下面是一个基于你的代码正确呈现的工作组件:
var ExampleComponent = React.createClass({
render: function () {
var profiles = $.map(this.props.profs, function (prof) {
return (
<tr key={prof.name}>
<td>{prof.name}</td>
<td>{prof.type}</td>
</tr>
);
});
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
{profiles}
</tbody>
</table>
);
}
});
var profileObjects = [{name: 'Brendan Eich', type: 'Netscape'},
{name: 'Jordan Walke', type: 'Facebook'}
];
ReactDOM.render(
<ExampleComponent profs={profileObjects} />,
document.getElementById('container')
);
相关文章:
- 在 React JS 中,什么时候应该使用存储而不是直接操作视图的状态
- react本机导航器视图不呈现
- 将本地 Web 应用包含在 react 本机 Web 视图中
- 从列表视图传递 React 本机状态
- 使用 React 在浏览器调整大小时重新渲染视图
- 异步处理不影响 React+Flux 中视图的数据
- react native:可选择的部分列表视图出现错误
- React Native动态Web视图高度
- 在Day Change上更新React[Native]视图
- 如何使用react native处理视图组件的无显示和块显示
- 检测另一个视图何时被触摸-在react native中使用PanResponder拖动
- 如何在React Native中设置视图后面的整体背景颜色
- 如何在react.js中等待渲染视图直到$.get()完成
- 在 React.js 应用程序中,API 调用在存储中失败,我如何将其传输回视图
- React视图在React 0.14中不渲染
- 如何在react native中呈现包含视图的函数?
- 当引用对象改变时,react .js视图不更新
- React和Flux -如何绑定视图来存储数据
- 如何在rails-react视图中实现each_slice
- 从Java服务器使用Webpack构建React视图