使用React.js在Iterator中創建對象

Question

我有一個數組

let ability = ["100", "500" , "90" , "90" , "90" , "90" , "90" , "90" , "90" , "90"]

我正在迭代器中創建對象，並希望將數組的每個值傳遞給“ Progress Circle”的道具。 因此，第一個對象的寬度為100，第二個對象的寬度為500，依此類推。

import React, {Component} from 'react';
import ProgressCircle from './ProgressCircle';
import './App.css';

class Skills extends Component {

render(){
let skills = ["HTML", "CSS", "Swift", "PHP", "Python", "React.js", 
"Javascript", "Git", "API Integration", "Java"]
let ability = ["100", "500" , "90" , "90" , "90" , "90" , "90" , "90" , 
"90" , "90"]
let map = skills.map(function(skill, i) {
  return(
    <div key={i}>
      <h1 id="skill">{skill}</h1>
      <ProgressCircle ability={ability[i]}/>
    </div>
  );
 })
 return(
  <div className="skillsCont">
    <h1 id="skillsTitle">My Skills</h1>
    {map}
  </div>
   );
 }
 }
 export default Skills;

但是，當在對象的類中渲染對象時，在props中傳遞的值不是唯一的。 當迭代器遍歷數組時，所有對象都會不斷變化，因此所有對象最終都具有數組中最后一個值的props，即所有對象的寬度最終為90

import React, {Component} from 'react';
import $ from 'jquery';
import './App.css';

class ProgressCircle extends Component {
componentDidMount() {
$('.enter').click(function() {
  setTimeout(function() {
    $('.progressFill').animate({"width": this.props.ability}, 1000);
  }.bind(this), 6000);
}.bind(this));
}
render(){
return(
  <div className="progress">
    <div className="progressFill">
    </div>
  </div>
);
} 
}

export default ProgressCircle;

任何想法如何解決這個問題？

Answer 1

這里的問題是，您正在選擇帶有$('.progressFill').animate 所有元素，因此，當最后一個元素運行時，它將使用progressFill類更改每個元素。

您應該使用ref僅選擇ProgressCircle正在創建的元素：

import React, {
    Component
} from 'react';
import $ from 'jquery';
import './App.css';

class ProgressCircle extends Component {
    constructor(props) {
        super(props);
        // create a ref to store the textInput DOM element
        this.progressFillRef = React.createRef();
    }

    componentDidMount() {
        $('.enter').click(function() {
            setTimeout(function() {
                $(this.progressFillRef.current).animate({
                    "width": this.props.ability
                }, 1000);
            }.bind(this), 6000);
        }.bind(this));
    }
    render() {
        return (
            <div className = "progress" >
                <div className = "progressFill"ref = {this.progressFillRef} >
                </div>
            </div>
        );
    }
}

export default ProgressCircle;

因此，您應該在組件的構造函數上創建一個引用，然后在<div>上使用該引用。 當你的JS運行做annimation，就可以得到實際呈現<div>與this.myRefThatIHaveCreated.current ，然后將它傳遞給$選擇

Answer 2

為簡便起見，我將您的Progress替換為一個實質性的UI組件，以顯示一個不錯的設置，該功能可以完美地使用jQuery。

另一個重要的事情是將不會改變的內容保留在render方法之外，以提高性能。

添加getPercentage函數只是因為material-ui組件期望的值為0-100。 如果您想使用線性進度指示器，則還需要一個相對值-具有絕對寬度值，您會遇到許多怪異的線條，它們從屏幕上移出：)

而且我擺脫了id屬性。 react中的唯一選擇器是關鍵，對於樣式，請使用className。

import React, { Component } from 'react'
import CircularProgress from '@material-ui/core/CircularProgress';
import './App.css';

const skills = [
    "HTML", "CSS", "Swift", "PHP", "Python", "React.js", "Javascript", "Git", "API Integration", "Java"
]
const ability = [
    100, 500, 90, 90, 90, 90, 90 , 90 , 90 , 90
]

const abilityMax = 1000

export function getPercentage (index) {
    const value = ability[i]
    const percentageOfMax = value / abilityMax
    return percentageOfMax * 100
}

class Skills extends Component {
    constructor(props) {
        super(props);

        this.renderItems = this.renderItems.bind(this);
    }

    renderItems(skills) {
        return(
            skills.map((skill, i) => 
                <div key={i}>
                    <h1>{skill}</h1>
                    <CircularProgress
                        variant="determinate"
                        value={getPercentage(i)}
                    />
                </div>
            )
        )
    }

    render() {
        return (
                <div className="skillsCont">
                    <h1>My Skills</h1>
                    {this.renderItems(skills)}
                </div>
            ) 
    }
}

export default Skills;

希望有幫助！