0

Проблема такая: есть функциональный компонент ColorList, который отображает компоненты цветов Color. Все цвета передаются массивом из внешнего компонента.

const ColorList = ({ colors=[], onRate=f=>f, onRemove=f=>f }) => (
    <div className="colorList">
        {(colors.length===0) ? 
            <p>No colors Listed. (Add color)</p> :
            colors.map(elem => 
                <Color key={elem.id} 
                    {...elem}
                    onRate={(rating) => onRate(elem.id, rating)}
                    onRemove={() => onRemove(elem.id)} />
            )}
    </div>
);

Цвета Color представляют из себя заголовок, сам цвет и рейтинг.

class Color extends React.Component {

    static propTypes = {
        title: PropTypes.string.isRequired,
        color: PropTypes.string.isRequired, 
        rating: PropTypes.number.isRequired,
        onRemove: PropTypes.func.isRequired,
        onRate: PropTypes.func.isRequired
    }

    static defaultProps = {
        title: "Unknown color",
        color: "#000000",
        rating: 0,
        onRemove: f => f,
        onRate: f => f
    }

    componentWillMount() { 
        this.style = {backgroundColor: "#CCC"};
    }

    shouldComponentUpdate(nextProps) {
        return this.props.rating !== nextProps.rating;
    }

    componentWillUpdate(nextProps) {
        this.style = null;
        this.node.style.color = "red";
        alert(`${this.props.title}: rating ${this.props.rating} -> ${nextProps.rating}`);
    }

    componentDidUpdate() {
        this.node.style.color = "black";
    }

    render() {
        const { title, color, rating, onRemove, onRate} = this.props;

        return (
            <section className="colorSection" style={this.style}>
                <section className="colorTitle">
                    <h1 ref={node => this.node = node} className="title">{title}</h1>
                    <button onClick={onRemove}>X</button>
                </section>
                <div className="color" style={{backgroundColor: color}}>
                </div>
                <StarRating starsSelected={rating} onRate={onRate} />
            </section>
        );
    }
}

Как видно из кода, я использовал ref на заголовок h1 с целью поменять цвет текста в то время, когда цвет захотят обновить (установят новый рейтинг). Ожидаемое поведение: пользователь меняет рейтинг, вызывается метод componentWillUpdate, меняется цвет заголовка на красный и выскакивает алерт об изменении цвета, а после подтверждения цвет заголовка снова становится черным. Проблема в том, что цвет заголовка не меняется перед тем, как выскакивает алерт, а остается черным, а после подтверждения алерта заголовок, видимо, заголовок быстро меняет цвет на красный и снова на черный. Подскажите, пожалуйста, почему так происходит?

5
  • Истина кроется где-то тут: "alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»." 28 янв 2018 в 9:43
  • Потому что у вас в componentWillUpdate стоит алерт(те до того как дом отрендрится и поменяет цвет), а в componentDidUpdate ( уже после того как он поменяет цвет) стоит снова поменять цвет на черный
    – DiDex
    28 янв 2018 в 10:01
  • Ну так разве изменение DOM при помощи refs не происходит в отдельном потоке рендера? Если следовать этой логике, то цвет должен меняться до алерта. 28 янв 2018 в 10:11
  • рендер дома происходит только на следующей итерации выполнения программы, а alert немедленно. Оберните alert в setTimeout с нулевой задержкой. Это нормально.
    – user220409
    28 янв 2018 в 10:22
  • Сделал, как написали. Действительно работает, но не полностью. Заголовок стал окрашиваться красным до алерта, но только в том случае, если мы уберем метод componentDidUpdate, в котором заголовок обратно окрашивается в черный. Желательно сделать так, чтобы заголовок окрашивался в красный до алерта, а после подтвреждения обратно возвращался в черный цвет. 28 янв 2018 в 11:02

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.