面试题：React中三元运算符与状态管理结合的复杂条件渲染

1. 使用React和Redux实现条件渲染

假设我们使用React和Redux，首先创建相关的Redux store和action来管理产品销售状态和用户登录状态。

安装依赖

npm install react-redux redux

创建Redux store和actions

// actions.js
const SET_PRODUCT_STATUS = 'SET_PRODUCT_STATUS';
const SET_USER_LOGIN_STATUS = 'SET_USER_LOGIN_STATUS';

export const setProductStatus = (status) => ({
  type: SET_PRODUCT_STATUS,
  payload: status
});

export const setUserLoginStatus = (isLoggedIn) => ({
  type: SET_USER_LOGIN_STATUS,
  payload: isLoggedIn
});

// reducer.js
const initialState = {
  productStatus: '正常销售',
  isLoggedIn: false
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_PRODUCT_STATUS:
      return {...state, productStatus: action.payload };
    case SET_USER_LOGIN_STATUS:
      return {...state, isLoggedIn: action.payload };
    default:
      return state;
  }
};

export default rootReducer;

// store.js
import { createStore } from'redux';
import rootReducer from './reducer';

const store = createStore(rootReducer);

export default store;

产品详情页组件

import React from'react';
import { useSelector } from'react-redux';

const ProductDetail = () => {
  const productStatus = useSelector(state => state.productStatus);
  const isLoggedIn = useSelector(state => state.isLoggedIn);

  return (
    <div>
      <h1>产品详情页</h1>
      {productStatus === '正常销售'? (
        <div>
          <p>产品正常销售中</p>
          {isLoggedIn? <button>加入购物车</button> : null}
        </div>
      ) : productStatus === '缺货'? (
        <p>产品缺货</p>
      ) : productStatus === '预售'? (
        <div>
          <p>产品预售中</p>
          {isLoggedIn? <button>预订</button> : null}
        </div>
      ) : null}
    </div>
  );
};

export default ProductDetail;

根组件中连接Redux store

import React from'react';
import ReactDOM from'react-dom';
import { Provider } from'react-redux';
import store from './store';
import ProductDetail from './ProductDetail';

ReactDOM.render(
  <Provider store={store}>
    <ProductDetail />
  </Provider>,
  document.getElementById('root')
);

2. 确保代码可维护性和扩展性

模块化：将不同功能逻辑封装成独立的模块，如上述代码中的actions.js、reducer.js和ProductDetail.js。这样每个模块职责单一，便于理解和维护。
使用常量：在actions.js中使用常量来定义action类型，避免硬编码，提高代码的可读性和可维护性。如SET_PRODUCT_STATUS和SET_USER_LOGIN_STATUS。
合理分层：将状态管理（Redux相关）和组件展示逻辑分开。状态管理集中在store和reducer，组件只负责根据状态渲染UI，使得代码结构清晰，易于扩展新的状态或功能。
注释：对关键代码段添加注释，尤其是复杂的条件渲染逻辑部分，方便其他开发者理解代码意图。
测试：编写单元测试和集成测试，确保状态管理和条件渲染逻辑的正确性。对于Redux部分，可以测试action是否正确触发和reducer是否正确更新状态；对于组件，可以测试不同状态下的UI渲染是否符合预期。

面试题：React中三元运算符与状态管理结合的复杂条件渲染

知识考点

面试题答案

1. 使用React和Redux实现条件渲染

安装依赖

创建Redux store和actions

产品详情页组件

根组件中连接Redux store

2. 确保代码可维护性和扩展性