Измените стиль элемента в React от его родителя, используя дочернее состояние - PullRequest
Новая
       50

Измените стиль элемента в React от его родителя, используя дочернее состояние

0 голосов
/ 08 марта 2020

Я новичок в React. Я создал проект, в котором мне нужно изменить стиль элемента по сравнению с родительским. Точнее, я не хочу управлять zIndex моего компонента с именем Zone из компонента Template. Я использовал состояния для хранения свойств стиля, и я не знаю, является ли это лучшим вариантом для этого. Кажется, проще управлять реквизитом от родителя, но я хочу динамически изменять размер зоны в соответствии с действиями мыши и зная, что реквизиты не обновляются, я не уверен, что при создании нового компонента зоны потребуется получать все данные предыдущего (кроме свойства, с которым я не буду действовать) каждый раз, когда я не буду действовать, это лучший способ сделать это. Итак, как я могу изменить свойство стиля зоны от его родителя («Шаблон») или, если это действительно не рекомендуется делать, что я должен сделать, чтобы получить нечто подобное? Вот мой код и спасибо за помощь: 

import React from 'react';


class Zone extends React.Component {
    constructor() {

        this.state = {
            name: null,
            size: {
                width : 0,
                height : 0
            },
            position: {
                top :  0,
                left : 0
            },
            parent : null,
            zIndex : 0,

            entries: []
        };
        console.log(this. props)
    }

    setZIndex (zIndex) {
        console. log(zIndex)
        if( typeof zIndex !== 'number' ) throw new Error( 'invalid argument for zIndex' ) ;
        this.setState( { zIndex : zIndex } )
    }

    buildStyle() {
       const { width , height } = this. state. size ;
       const { top , left } = this. state. position ;
       const zIndex = this. state. zIndex ;

       return { zIndex, width, height, top, left }
    }
    render() {
        const stylesContainer = this. buildStyle() ;

        return (
            <div id = { this. state. name } className = "zone" style={ stylesContainer } >
                <p>test</p>
            </div>
        );
    }
}

export default Zone ;

// ./assets/js/components/Items.js
import React from 'react';
import Zone from "./Zone";

class Template extends React.Component {
    constructor() {
        super();

        this.state = {
            size: {
                width : 1080,
                height : 720
            },
            zones: {

            },
            entries: []
        };
    }



     getFirstIndexAvailableInTemplateZones() {
        let zones = this.state.zones ;
        let allIndexsInArray = Object. keys( zones ) ;

        let firstIndexAvailable = null ;
        for(let i=0 ; i <= allIndexsInArray. length ; i++ ){
            if (typeof this. state. zones[ i ] === 'undefined' ) firstIndexAvailable = i
        }
        return typeof firstIndexAvailable ==='number' ? firstIndexAvailable : false ;
    };

    addZone() {

        let newZone = <Zone />;

        //this is not working 
        newZone. setZIndex(0) 
        this.setState( state => {
            state. zones[ newZone. state. zIndex ] = newZone ;
            return state. zones
        });

        console. log (this .state)
    };

    getTemplateZones() {
        return Object. values( this. state. zones )
    }

    render() {
        return (
            <div id="template" className="template" style={ this.state.size } onClick={ e =>  this.addZone() }>
                { this. getTemplateZones(). map( templateZone => {
                    return  templateZone
                }) }
            </div>
        );
    }
}

export default Template ;
...