根据道具和之前道具的比较，进行条件渲染的最佳方法是什么？

Question

我试图在行上实现绿色或红色发光，具体取决于数字是增加还是减少。

实现这一目标的最佳方法是什么？

在mapStateToProps或渲染过程中是否有办法比较两者？

Answer 1

由于组件的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。在action creator

在执行操作之前读取当前状态。 请注意，此示例要求您使用redux-thunk：

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

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

2。在reducer

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 is just a safe way to get 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建议的/* 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; } {/ 3}}。

简要渲染颜色

这里我改变了文本的颜色，但你当然可以改变背景或其他任何东西。

// 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>
        );
    }
}

          <select class='form-control' id=class_code name=class_code 
          onchange='setTextField(this)'><option value=''>Select 
          class</option>";
         <option value=$row[class_code] >$row[class]</option>";
             }
        </select>
        <input id='cls' type = 'hidden' name = 'cls' value = '' />
           <script type='text/javascript'>
          function setTextField(dddl) {
               document.getElementById('cls').value = 
            dddl.options[dddl.selectedIndex].text;
               }
            </script>

            <select class='form-control' id=semester_id name=semester_id     
            onchange='setTextField(this)'><option value=''>Select 
             semester</option></select>
            <input id='semm' type = 'hidden' name = 'semm' value = '' />
           <script type='text/javascript'>
          function setTextField(ddl) {
              document.getElementById('semm').value = 
              ddl.options[ddl.selectedIndex].text;
                }
           </script>

Answer 2

你可以使用componentDidUpdate（prevProps，prevState），在其中进行检查，访问this.props和this.state，它们将被更新，并基于此setState({changed:this.props.number !== this.prevProps.number })

制作有关生命周期https://reactjs.org/docs/react-component.html#componentdidupdate的文档以供参考

Answer 3

你可以使用它。

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