Core Web 组件的清晰反应收发器

Clearty Core是Web组件的套件,来自 清晰设计系统。因为反应 与自定义元素不完全互通 我们开发了这个 React 组件库,将清晰的 Web 组件包起来

安装

1. (可选):从 npm 安装 Clarity 核心包.

   npm install @cds/core --save
   

2. 从 npm 安装 Clarity 反应包 .

   npm install @cds/react --save
   

3. 将想要的组件导入到您的 JavaScript 或 TypeScript

   import { CdsModal, CdsModalActions, CdsModalContent, CdsModalHeader } from '@cds/react/modal';
   

4. 在 React 中使用 resact 包裹的 Web 组件

   {
     /*
     Example of a modal web component in React with React Shim
     - size - attribute style hook
     - open - setting the 'open' property on the element
     - openChange - listen for the `openChange` custom event
   */
   }
   <CdsModal onCloseChange={this.handleCloseModalClick.bind(this, false)}>
     <CdsModalHeader>
       <h3 cds-text="title">My Modal</h3>
     </CdsModalHeader>
     <CdsModalContent>
       <div cds-layout="vertical gap:md p-y:xs">
         <p cds-text="body">Lorem Ipsum</p>
       </div>
     </CdsModalContent>
     <CdsModalActions>
       <div cds-layout="horizontal gap:sm align:right">
         <CdsButton onClick={this.handleCloseModalClick.bind(this, false)} action="outline">
           Cancel
         </CdsButton>
         <CdsButton onClick={this.handleCloseModalClick.bind(this, false)}>Ok</CdsButton>
       </div>
     </CdsModalActions>
   </CdsModal>;
   

使用裁判

在反应中 参考 提供访问 DOM 节点或 渲染法中创建的反应元素 。 因为网络组件的生命周期 生活在反应之外 当网络组件完成渲染后,我们的组件提供了一种使用refs的方法:

import React from 'react';
import { CdsButton } from '@cds/react/button';

export default class App extends React.Component<{}, {}> {
  buttonRef: React.RefObject<CdsButton>;

  constructor(props: any) {
    super(props);
    this.buttonRef = React.createRef<CdsButton>();
  }

  componentDidMount() {
    this.buttonRef.current.nativeElement.then(element => {
      element.focus();
    });
  }

  render() {
    return (
      <div>
        <CdsButton ref={this.buttonRef}>My button</CdsButton>
      </div>
    );
  }
}