react组件的多个实例不工作

multiple instances of react components not working?

本文关键字：实例 工作 组件 react      更新时间：2023-09-26

我试图创建我的react组件的多个实例，但只有第一个被呈现。我想我在这里做了一些重大失败:)

这是组件。

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元素上的data-id属性使用不同的数据。

谢谢你的帮助:)

//G

与其像在其他框架中那样使用id属性，不如在React组件中使用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
    );
}

我建议使用包装器组件，并为每个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>

相关文章：