Каков наилучший способ сделать условный рендеринг в зависимости от сравнения реквизитов и предыдущих реквизитов?

Question

Я пытаюсь реализовать зеленое или красное свечение в строке в зависимости от того, увеличивается или уменьшается число.

Как лучше всего это сделать?

Есть ли способна mapStateToProps или во время рендера для сравнения двух?

Answer 1

Вы можете использовать это.

this.setState((prevState, props) => {
  if(props.step < 0)
  {
    return {counter: prevState.counter + props.step, color:'red'};
  }
  return {counter: prevState.counter + props.step, color:'blue'};
});

На основе этого цвета в состоянии компонент будет визуализироваться снова.Для получения дополнительной информации посетите. SetState

Answer 2

Поскольку метод render компонента имеет доступ только к текущим реквизитам и состоянию, вы должны хранить информацию об изменении значения в текущем реквизите и / или состоянии.Затем вы должны указать изменение (я полагаю) на короткий промежуток времени.

Где установить состояние, чтобы мы знали, какой цвет показывать

Есть несколько возможностей, где это сделать в спискениже; выберите один из них, а не все. Все они используют следующую служебную функцию:

function getChange(value, prevValue) {
    if (typeof prevValue === 'undefined') {
        // If previos value did not exist, don't count it as a change.
        // This is to avoid "feedback" the first time the value is rendered.
        return;
    }
    if (value === prevValue) {
        return;
    }

    return value < prevValue
        ? 'decrease'
        : 'increase';
}

1.В создатель действия

Считайте текущее состояние перед отправкой действия.Обратите внимание, что в этом примере требуется использовать redux-thunk :

const changeValueTo = (value) => (dispatch, getState) => {
    const prevValue = getState().value;

    distpatch({
        type: 'SET_VALUE',
        change: getChange(value, prevValue),
        value: value
    });
}

2.В редуктор

function valueReducer(state = { value: void 0, change: void 0 }, action) {
    switch (action.type) {
        case 'SET_VALUE':
            return {
                value: action.value,
                change: getChange(action.value, state.value)
            };
        default:
            return state;
    }
}

PS: void 0 - это просто безопасный способ получить undefined.PPS: Мы могли бы просто использовать state = {}, но я предпочитаю быть конкретным.

3.В компоненте getDerivedStateFromProps

class Value extends React.Component {

    state = {
        change: 'black'
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        return {
            value: nextProps.value,
            change: getChange(nextProps.value, prevState.value)
        };
    }

    render() {
        ...
    }
}

4.В других методах жизненного цикла компонента

Как, например, в componentDidUpdate, как предложено Bruno Mazzardo .

Рендеринг цвета кратко

Здесь я меняю цветтекст, но вы, конечно, можете изменить фон или что-нибудь еще.

/* css */
@keyframes red-fadeout {
    from {
        color: red;
    }
    to {
        color: black;
    }
}
@keyframes green-fadeout {
    from {
        color: green;
    }
    to {
        color: black;
    }
}
.decreased {
    animation: 3s red-fadeout;
}
.increased {
    animation: 3s green-fadeout;
}

// React
class Value extends React.Component {
    ...
    render() {
        const {
            value,
            change = '' // Assuming change is either 'increased', 'decreased' or falsy
        } = this.props;

        return (
            <div className={change}>{value}</div>
        );
    }
}

Answer 3

Вы можете использовать componentDidUpdate (prevProps, prevState), выполнить проверку внутри него, получив доступ к this.props и this.state, которые будут обновлены, и на основании этого setState({changed:this.props.number !== this.prevProps.number })

Реагировать на документацию ожизненный цикл https://reactjs.org/docs/react-component.html#componentdidupdate для справки