反應組件的多個實例無法正常工作？

Question

Iam試圖創建我反應組件的多個實例，但只渲染了第一個實例。我猜iam在這裏做了一些重大的失敗:)

這是組件。

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import ChartJS from 'chart.js' 
 
import DataService from '../core/data-service.js'; 
 

 
function GetReportData() { 
 

 
    let chartElement = document.getElementById('react-chart-bar'); 
 

 
    var id = { 
 
     id: chartElement.dataset.id 
 
    }; 
 

 
    DataService.getReportData(id).done(function(data) { 
 
     renderChart(data); 
 
    }).fail(function(jqXHR, status, error) { 
 
     console.log(error); 
 
    }); 
 
} 
 

 
function renderChart(data) { 
 

 
    var ctx = document.getElementById('chart-bar'); 
 

 
    var chart_bar = new ChartJS(ctx, { 
 
     type: data.ChartType, 
 
     data: { 
 
      labels: data.Labels, 
 
      datasets: data.DataSet 
 
     }, 
 
     options: { 
 
      responsive: true, 
 
      scales: { 
 
       yAxes: [ 
 
        { 
 
         ticks: { 
 
          beginAtZero: true, 
 
          max: data.MaxTicks 
 
         } 
 
        } 
 
       ] 
 
      } 
 
     } 
 
    }); 
 
} 
 

 

 
class Chart extends React.Component { 
 
    componentDidMount() { 
 
     GetReportData(); 
 
    } 
 
    render() { 
 
     return <div> 
 
      <canvas id="chart-bar" width="400" height="300"></canvas> 
 
     </div> 
 
    } 
 
} 
 

 
let node = document.getElementById('react-chart-bar'); 
 

 
if (node != null) { 
 
    ReactDOM.render(
 
     <Chart/>, node); 
 
}

然後在我的HTML我這樣調用的組件。

<div id="react-chart-bar" data-id="1"></div> 
 
<div id="react-chart-bar" data-id="9"></div>

我需要呈現相同的組分，而是基於HTML元素上的數據-id屬性不同勢數據。

感謝您的幫助:)

// g^

Answer 1

而不是使用id屬性，就像你與其他框架，使用ReactDOM.findDOMNode一個陣營組件內部去真正的DOM節點的引用。難道，只有當組件已經呈現，就像裏面componentDidMount：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ChartJS from 'chart.js' 
import DataService from '../core/data-service.js'; 


class Chart extends React.Component { 
    componentDidMount() { 
     let chartElement = ReactDOM.findDOMNode(this); 

     var id = { 
      id: this.props.reportId, 
     }; 

     DataService.getReportData(id).done((data) => { 
      this.renderChart(data); 
     }).fail(function(jqXHR, status, error) { 
      console.log(error); 
     }); 
    } 
    renderChart(data) { 
     var ctx = ReactDOM.findDOMNode(this); 

     var chart_bar = new ChartJS(ctx, { 
      type: data.ChartType, 
      data: { 
       labels: data.Labels, 
       datasets: data.DataSet 
      }, 
      options: { 
       responsive: true, 
       scales: { 
        yAxes: [ 
         { 
          ticks: { 
           beginAtZero: true, 
           max: data.MaxTicks 
          } 
         } 
        ] 
       } 
      } 
     }); 
    } 
    render() { 
     return <div> 
      <canvas width="400" height="300"></canvas> 
     </div> 
    } 
} 

let node = document.getElementById('react-chart-bar'); 

if (node != null) { 
    ReactDOM.render(
     <Chart reportId={node.getAttribute('data-id')} />, 
     node 
    ); 
} 

Answer 2

我會建議，其中包裝膜成分，使每個ID的圖表如下圖所示。

function getReportData(id) { 
 
    return `Here is some data for id ${id}`; 
 
} 
 

 
class Chart extends React.Component { 
 
    constructor() { 
 
     super(); 
 
     
 
     this.state = { 
 
     data: null 
 
     }; 
 
    } 
 

 
    componentDidMount() { 
 
     this.setState({ data: getReportData(this.props.dataId) }); 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <div> 
 
      <span>{this.state.data}</span> 
 
      <canvas id="chart-bar" width="400" height="10"></canvas> 
 
      </div> 
 
     );  
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
     return (
 
      <div> 
 
      <Chart dataId='1' /> 
 
      <Chart dataId='2' /> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id='root'></div>