[React] Przekazywanie generowanych propsów

Question

Witam,

Mam problem z przekazywaniem wcześniej wygenerowanych propsów do komponentów.

Mam pętle, która generuje wartości kolorów, które to są przekazywane do komponentów w formie propsów.

for (let i = 0; i < quantity; i++) {
      let generatedIndex = getRandomNumber(0, 2)

      while (generatedIndex === prevIndex) {
        generatedIndex = getRandomNumber(0, 2)
      }

      prevIndex = generatedIndex
      let CreatedShape = ShapesArray[generatedIndex]
      shapes.push(<CreatedShape color={choosenColor}/>)
    }
    return shapes

Problem polega na tym, że wszystkie komponenty przyjmują pierwszy wygenerowany kolor jako props, mimo, że w propsach jest przekazywana nowa wartość.

Answer 1

Nie bardzo rozumiem co robi createdShape (przypuszczam, że ma wybrać kolor z tablicy shapesArray (?) ) nie wiadomo też skąd się wziął choosenColor.

Dopiero uczę się reacta, ale może uda Ci się wywnioskować coś z poniższego kodu (realizuje wyświetlanie kwadratów o 3 różnych kolorach zakładając, że 2 następujące po sobie kolory mają się nie powtórzyć - przynajmniej taką funkcjonalność zrozumiałem z Twojego kodu ;) ).

index.html

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


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

App.js

import React,{Component} from 'react';
import CreatedShape from './CreatedShape';

class App extends Component {

    getRandomNumer = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) ) + from;
    }

    render() {

        let quantity = 5;
        let prevIndex;
        let generatedIndex;
        let shapes = [];
        let colorArray = ['#F00','#0F0','#00F'];

        for(let i=0; i<quantity; i++){
            
            do {
                generatedIndex = this.getRandomNumer(0,2);
            } while (generatedIndex === prevIndex);

            prevIndex = generatedIndex;
            let choosenColor = colorArray[generatedIndex];

            shapes.push(<CreatedShape key={i} color={choosenColor} />);
        }

        return (
            <div>
                {shapes}
            </div>
        )
    }
}

export default App;

komponent CreatedShapes.js

import React,{Component} from 'react';

class CreatedShape extends Component {
    render() {

        const shapeStyle = {
            backgroundColor: this.props.color,
            height: 100,
            width: 100
        }

        return (
            <div style={shapeStyle}>
            </div>
        )
    }
}

export default CreatedShape;

 

Answer 2

Bo nie możesz sobie od tak zmieniać Props zęwnątrz. Musiałbys stworzyć definicje Props i ją wstrzyknąć do komponentu React zanim on się zainicjuje . Od zmiany stanów jest state a przykład masz poniżej.

 

Przykład wstrzykiwaniem props masz oto taki.

//create-react-class
const reactComponentFactory = (data) => {
    createReactClass.getDefaultProps = () => Object.assign({}, data.props);
   createReactClass.render  = () => data.template;
  return createReactClass;
});

function init(data) {
   let reactComponent = reactComponentFactory(data);
   ReactDOM.render(</reactComponent>, document.getElementById('test');
}

Plus minus coś takiego