React组件传值（实战）

React组件传值（实战）

• 方式一:props

父组件

  <XModal
        width={950}
        title="Json数据展示"
        ctrlRef={modaljsonRef}
        onOk={() => onJsonOk()}
        onCancel={onJsonCancel}
      >
        <JsonModal details={jsonDetails} />
      </XModal>

子组件

import { FC } from 'react';

interface Props {
  details: any;
}
const JsonModal: FC<Props> = (props: Props) => {
  const { details } = props;
  return <pre>{JSON.stringify(JSON.parse(details.checkScene), null, 18)}</pre>;
};

export default JsonModal;

效果就是，可以通过Props，将父组件的值jsonDetails传递给子组件，进行展示。效果：弹窗形式表示json格式数据

---

• 方式二：useContext：组件自建共享状态

准备：那些组件需要共享状态，则那些组件被CouponContext.Provider包裹

export const defaultValue = {
  filterForm: {}, //需要共享的组件的属性
  messageVisible: false, 
  modalData: {},
  list: {},
  dataSource: {
    success: false,
    error: false,
    done: false,
    data: [],
  }, // 表格列表
  pagination: {
    current: 1,
    pageSize: 10,
    total: 0,
  },

};

const CouponContext = React.createContext(defaultValue);

<CouponContext.Provider>
 <>
        <FilterForm />//需要共享的组件
        <TableLayout />//需要共享的组件
        <MessageModal />//需要共享的组件
        <DetailModal />//需要共享的组件
        <OptionModal />//需要共享的组件
  
 </>
 </CouponContext.Provider>

使用：

const TableLayout = () => {
  const {
    optionVisible: visible,//用到共享属性
  } = useContext(CouponContext);//关键点
 function onCalcel() {
    setState({
      optionVisible: false,
    });
  }
   return (
    <Modal
      title="别管我"
      visible={visible}
      onCancel={onCalcel}
      width="600"
    >
     我要睡觉
    </Modal>
  );
};

export default TableLayout;

• 总结

方法1：适合父子组件传值,2-3个组件传值
方法2: 适合父子组件和兄弟组件的组件，多组件传值。