React视图在React 0.14中不渲染

React View is not rendered in React 0.14

本文关键字：React 视图      更新时间：2023-09-26

我尝试迭代一个对象，并在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')
);
相关文章：