面试题：React里借助Props动态切换复杂CSS样式类

Question

现有一个卡片组件，需要根据传入的props值`cardType`（可能取值为'primary'、'secondary'）来应用不同的CSS样式类，样式类在`styles.css`文件中已定义为`.primary - card`和`.secondary - card`，请完成该组件代码编写，实现样式的动态切换。

Answer 1

以下以React为例：

import React from 'react';
import './styles.css';

const Card = ({ cardType }) => {
    const cardClassName = cardType === 'primary'? 'primary - card' :'secondary - card';
    return <div className={cardClassName}>这是卡片内容</div>;
};

export default Card;

如果是Vue：

<template>
  <div :class="cardClassName">
    这是卡片内容
  </div>
</template>

<script>
export default {
  props: {
    cardType: {
      type: String,
      required: true
    }
  },
  computed: {
    cardClassName() {
      return this.cardType === 'primary'? 'primary - card' :'secondary - card';
    }
  }
};
</script>

<style scoped src="./styles.css"></style>

上述代码展示了在React和Vue中，如何根据传入的cardType属性动态切换CSS样式类。具体实现时请确保styles.css中的.primary - card和.secondary - card样式类正确定义。