Question

我正在尝试在元素中渲染一个对象（SET IDENTITY_INSERT TableA ON ... INSERT ON TableA ... SET IDENTITY_INSERT TableA OFF SET IDENTITY_INSERT TableB ON ... INSERT ON TableB ... SET IDENTITY_INSERT TableB OFF中的Panel元素）。

react-bootstrap

但这不起作用。引发的错误是

未捕获的不变违规行为：对象作为React子级无效（找到：具有键{self}的对象）。如果你想渲染一个集合对于子级，使用数组或使用包装对象来自React附加组件的createFragment（对象）。检查渲染方法 'NetworkDetail'。

我不明白的是，如果我使用

import React, { PropTypes } from 'react'; import { Panel } from 'react-bootstrap'; const NetworkDetail = React.createClass({ render () { return ( <Panel header="Network Details" bsStyle="info"> {this.props.dataDetail && Object.keys(this.props.dataDetail).map(function(detail, id) { return <span key={id}>{this.props.dataDetail[detail]}</span>; }.bind(this))} </Panel> ) } }) export default NetworkDetail

它有效。

如何渲染对象的所有属性和值？

Answer 1

在我看来，这个组件是无状态/哑组件。因此，您应该首先阅读有关如何编写这些组件以最大限度提高效率的信息：https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

然后，要修复您的组件，您应该注意到

<script>

  function sourceRenderer(params) {
    if (params.value)
      return '<span><a  href="/harvest/' + params.data.asource + '/' + params.value + '">' + params.value + '</a>'
    else 
      return null;
    }

  function innerCellRendererA(params) {
    var imageFullUrl = '/images/' + params.data.type + '.png';
    if (params.data.type == 'entity') {
      var entityUrl = '/analyze/' + params.data.asource + '/' + params.data.amodel + '/' + params.data.sourceName;
      return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" />  <a href="'+entityUrl+'">' + params.data.name + ' (' + params.data.sourceName + ')</a>';
    }
    else if (params.data.type == 'model') {
      var entityUrl = '/harvest/' + params.data.asource + '/' + params.data.name;
      return '<a href="javascript:void(0);" title="Harvest Relational Data"><img src="'+imageFullUrl+'" style="padding-left: 4px;" /></a>  <a href="'+entityUrl+'">' + params.data.name + '</a>';
    }
    else
      return '<paper-icon-button  src="'+imageFullUrl+'" on-tap="testjdbc" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' +
      '<paper-icon-button  src="/images/database_export.svg" on-tap="harvestmodel" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' + params.data.name;
  }    

  Polymer({

    is: 'easymetahub-analyze',

    properties: {
      sourcelist: {
        type: Array,
        notify: true
      }
    },

    testjdbc: function(e){
      alert('Foo');
      var args = e.target.getAttribute('data-args').split('~~');
    },

    harvestmodel: function(e){
      alert('Bar');
      var args = e.target.getAttribute('data-args').split('~~');
    },

    handleData: function(e) {
      var resp = e.detail.response;
      this.sourcelist = resp;
    },

    ready: function() {
    },

    attached: function() {
      agGrid.initialiseAgGridWithWebComponents();

      var columnDefs = [
        {
          headerName: "Name", 
          'field': 'name', 
          width: 350, 
          cellRenderer: 'group', 
          sort: "asc",
          cellRendererParams: {
            innerRenderer: innerCellRendererA
          }
        },
        {headerName: "Database Type", field: "databasetype", width: 120 },
        {headerName: "URL", width: 250, field: "url" },
        {headerName: "User Name", field: "username", width: 120 }
      ];

      var gridOptions = {
        columnDefs: columnDefs,
        enableColResize: true,
        rowHeight: 36,
        enableSorting: true,
        getNodeChildDetails: function(file) {
          if (file.children) {
            return {
                group: true,
                children: file.children,
                expanded: file.open,
                field: 'name',
                key: file.name
            };
          } else {
            return null;
          }
        },
        onGridReady: function(params) {
          params.api.sizeColumnsToFit();
        }
      };

      this.$.myGrid.setGridOptions(gridOptions);
      var eInput = this.$.quickFilterInput;
      eInput.addEventListener("input", function () {
          var text = eInput.value;
          gridOptions.api.setQuickFilter(text);
      });

    },

    detached: function() {
      this.$.myGrid.api.destroy();
    }

  });

</script>

只是一个条件陈述。注意你的'＆amp;＆amp;'。因此，假设{this.props.dataDetail && Object.keys(this.props.dataDetail).map(function(detail, id) { return <span key={id}>{this.props.dataDetail[detail]}</span>; }.bind(this))}是一个对象，您可以像这样重写此组件：

this.props.dataDetail

让我知道这是否有效！

在React.js中循环并渲染一个对象

1 个答案: