Обработка дочерних ссылок условно без разрыва страницы - PullRequest
Новая
       16

Обработка дочерних ссылок условно без разрыва страницы

0 голосов
/ 06 февраля 2020

У меня есть класс ParentComponent, который отображает некоторые числа Component. С ParentComponent я передаю реквизит selected на Component. В любое время может быть выбран не более одного Component.

Я хочу получить ссылку Component в ParentComponent, когда выбран Component! Сначала я сделал это: 

class ParentComponent extends preact.Component {
   constructor(props) {
       super(props);
       this.handleSelectedLayer = this.handleSelectedLayer.bind(this);
   }

   handleSelectedLayer(componentEl) {
       this.componentEl = componentEl;
   }

   doSomethingWithComponentRef() {
       ...
   }

   render() {
       const {components, ...otherProps} = this.props;
       return (
           <div>
               {components.map(component => {
                   const selected = component.selected;
                   return (
                       <Component
                           selectedLayerRef={selected ? this.handleSelectedLayer : null}
                           selected={selected}/>
                   );
               })}
           </div>
       );
   }
}

class Component extends preact.Component {
    render() {
        return (
            <div ref={this.props.selectedLayerRef} ...otherProps/>
        );
    }
}

Поскольку ref в Component нужна функция, если компонент не выбран, приложение разрывается, так как я прошел null. Но если я передам undefined, он не сломается, и так как я использую ссылку только для выбранных Component с. Я могу делать все, что захочу.

Но я не хочу передавать undefined как refHandler prop.

Я также пробовал это в Component. 

class Component extends preact.Component {
    constructor(props) {
        super(props);
        this.handleRef = this.handleRef.bind(this);
    }

    handleRef(el) {
        if(this.props.selected) {
            this.props.selectedLayerRef(el);
        }
    }

    render() {
        return (
            <div ref={this.handleRef} ...otherProps/>
        );
    }
}

Но это не дает мне ссылку на выбранный компонент. handleRef срабатывает только в componentDidMount и никогда не запускается снова. Это было довольно странно, поэтому я прочитал код preacts. Я видел, как preact запоминает функцию обработчика ссылок, и если она не изменяется, обработчик ссылок не запускается снова. Они предлагают делать такого рода пересылку ссылок и вызывать обработчики ссылок внутри componentDidUpdate, но я пытаюсь найти что-то еще, чтобы не усложнить чтение моего кода! Так как Component класс уже смущает меня и моих коллег.

Есть ли у вас какие-либо предложения?

...