условно отображаемые элементы, использующие ref - PullRequest
Новая
       5

условно отображаемые элементы, использующие ref

0 голосов
/ 20 ноября 2018

У меня есть компонент, который визуализирует дочерний элемент <ul/> в зависимости от того, извлекаются ли данные из бэкэнда. 

class groupInfo extends Component {
    constructor(props) {
        super(props);
        this.setSubGroupRef = this.setSubGroupRef.bind(this);
        this.checkSubgroupOverflow = this.checkSubgroupOverflow.bind(this);
        this.state = {
            data: null,
            overflowingSubgroups: false,
        }
    }
    componentDidMount() {
        //fetch data from backend
        this.setState({data})
    }
    setSubGroupRef(node){
        this.subGroupRef = node;
        node.addEventListener("resize", this.checkSubgroupOverflow);
    }
    componentWillUnmount() {
        if (this.subGroupRef) {
            this.subGroupRef.removeEventListener("resize", this.checkSubgroupOverflow);
        }
    }
    checkSubgroupOverflow() {
        const element = this.subGroupContainer;
        if (element) {
            // Check against baseline rendered height of our subgroup container, plus a few safe pixels.
            // Magic number here because we know what the height *should* be when its collapsed by CSS.
            this.setState({
                overflowingSubgroups: (element.scrollHeight > 36),
            });
        }
    }
    render() {
        const {overflowingSubgroups, data} = this.state
        return (
            <div>
                <div>
                    some information
                </div>
                {
                    data.type === "group" ?
                    <div ref={this.setSubGroupRef}>
                        <ul>
                            {
                                data.subGroups.map((subData) => {
                                    return (
                                        <li>
                                            // display sub-data info
                                        </li>
                                    )
                                })
                            }
                        </ul>
                        {
                            overflowingSubgroups ?
                                <span
                                    className="iconMore"
                                    onClick={this.toggleSubgroupExpansion}
                                >
                                    <img
                                        src={`${iconPath}icon-arrow.svg`}
                                        alt="more"
                                    />
                                </span> :
                            null
                        }
                    </div>
                }
            </div>
        )
    }
}

То, чего я пытаюсь достичь, это то, что, если <ul/> имеет избыточный идентификатор, я хотел бы добавить тумблер на основе того, переполнен ли мой содержащийся div или нет. Проблема заключается в том, что, поскольку я перемещаюсь между этими подгруппами в первый раз, он также повторно отображает groupInfo, вызывая повторную выборку данных, которые затем сохраняются в хранилище избыточных данных для последующего использования, но это также вызывает новый узел экземпляр должен быть порожден, и я не могу убить свой старый eventListener. Теперь componentWillUnmount не вызывается, поскольку компонент просто перерисовывается с новыми данными.

Я пытаюсь избежать создания дочернего компонента React для <ul/> на основе data.type, поскольку это потребует серьезного рефакторинга.

...