import React from 'react';
const DefaultValue = {
  selection: {}, // 选中的项的数据
  onChange: () => {}, // 选中项发生变化
const context = React.createContext(DefaultValue);
export default context;
import Context from 'path/to/Context';
const RadioGroup = ({ selection, onChange, ...props }) => (
  <Context.Provider value=>
    {props.children}
  </Context.Provider>
export default RadioGroup;
import { Radio, Card } from 'antd';
import Context from 'path/to/Context';
import styles from './GoodsCard.less';
const GoodsCard = props => (
  <Context.Consumer>
      ({ selection, onChange }) => (
        // 24 为 Card 的一边 padding, 160 为图片的宽度
        <Card style= bordered={false}>
          <div className={styles.imgArea}>
            <img src={props.image} alt="i" />
            {props.added ? (<div className={styles.memo}>已添加</div>) : null}
          </div>
          <div className={styles.content}>
            <span className={styles.title}>{props.title}</span>
            <span className={styles.useTimes}>{`添加次数：${props.useTimes}`}</span>
            <div className={styles.selectButton}>
              <Radio
                // 这里，我们可以直接拿到管理组中选中的值，而不需要通过 props 传递选中的值
                // props 就只需要传递单选按钮的值而已
                // 通过比较上下文中当前选中的值与当前单选按钮的值，来确定是否选中单选按钮
                checked={selection.value === props.value}
                onChange={() => { onChange(props); }}
              </Radio>
            </div>
          </div>
        </Card>
  </Context.Consumer>
export default GoodsCard;