如何在Reactjs中动态填充图表条的宽度

如何解决如何在Reactjs中动态填充图表条的宽度

我是ReactJS的新手，所以我想念一些东西， 我需要根据变量lista的百分比填写图表， 我希望该值位于div的宽度（组件代码中的第70行）。 那就是我想（动态地）做的事情

我已经编辑了带检查器的图片。 这是我的组件

import 'd3-transition';
import React,{ Component } from 'react';
import logo from '../../sources/logo';
import './Articles.css';
//import Chart from './Chart';
// Tooltip
import { Tooltip } from 'react-tippy';

class Article extends Component {
    render() {
        const article = this.props.article;
        const words = this.props.words;

        const maxOccurence = Math.max(
            ...words.map((i) => article.contentWords[i]).filter((i) => i)
        );
        let lista = [...words.map((i) => article.contentWords[i]).filter((i) => i)];

        lista = lista.map(function (i) {
            return i === maxOccurence ? '100' : ((i / maxOccurence) * 100).toString();
        });

        let str = article.title;
        str = str.substring(0,50);
        if (!maxOccurence) {
            debugger;
        }
        //--------------

        return (
            <tr className="grow">
                <td>
                    <logo source={article.source} />
                </td>
                <td className="category">{article.category.toupperCase()}</td>
                <td className="title grow">
                    <a
                        href={`${article.link}`}
                        rel="noopener noreferrer"
                        target="_blank"
                        style={{
                            height: 100,width: '130%',maxWidth: '150%',minWidth: '100%',}}
                    >
                        <Tooltip title={article.title} arrow={true} disabled={true}>
                            {str + '[...]'}
                        </Tooltip>
                        {/*<div>
                            <div>{str + '[...]'}</div>
                        </div>*/}
                    </a>
                </td>
                <td>
                    {words.map((item) =>
                        article.contentWords[item] ? (
                            <div className="horizontal rounded">
                                <div className="progress-bar horizontal">
                                    <div className="progress-track">
                                        {/*<Chart
                                            width={lista}
                                            item={item}
                                            article={article.contentWords[item]}
                                        />*/}
                                        <div
                                            className="progress-fill "
                                            style={{
                                                width: lista[0] + '%',}}
                                        >
                                            <span>{item + ':' + article.contentWords[item]}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ) : (
                            <></>
                        )
                    )}
                </td>
            </tr>
        );
    }
}

export default Article;

Lista变量返回这样的数组。

我希望我的解释清楚。 如果我错过了什么，请问一下，我会提供的：）

解决方法

由于words和lista的长度相同，并且lista基于words，因此您可以使用{{1}的index } in

{words.map((item,index) =>