先看图就想实现这样的效果：
默认开始是“用户发展选中了”

然后点“产品发展”被选中的效果

小白react一枚，换成JQ30秒内就搞定。react语法茫然啊。。。
class这块
userDevAction “用户发展”选中的样式
productDevAction “产品发展”选中的样式

请react大神指点

<div className={styles.devType}>
          <div className={`${styles.userDev} ${styles.userDevAction}`} onClick={this.userDevClick}>
            <i className={styles.iconUserDev} />
            <p>用户发展</p>
          </div>
          <div className={styles.productDev} onClick={this.productDevClick}>
            <i className={styles.iconProductDev} />
            <p>产品发展</p>
          </div>
        </div>

首先要有一个状态表示谁被选中了 status 可选值'user'和'product'

status存state里就可以了

点击就把相应的值赋给 status

然后

<div className={styles.devType}>
  <div className={`${styles.userDev} ${status === 'user' ? styles.userDevAction : ''}`} onClick={this.userDevClick}>
    <i className={styles.iconUserDev} />
    <p>用户发展</p>
  </div>
  <div className={`${styles.productDev} ${status === 'product' ? styles.productDevAction : ''}`} onClick={this.productDevClick}>
    <i className={styles.iconProductDev} />
    <p>产品发展</p>
  </div>
</div>

没用过react，但是看你的代码结果，我觉得可以在calssName里写个三元表达式
className={flag?'高亮样式'：'不高亮的样式'} // 用户
className={!flag?'高亮样式'：'不高亮的样式'}//产品
flag可以是个判断，点击用户发展的事件给flag赋true,点击产品发展赋false