react技巧

1. 如何给props.children传入一个props属性
   比如：我们的children每一个都是一个react组件，那么我想给这里面的组件添加一个属性该如何做，这里以collapse折叠面板为例

<Collapse activeName={['1']}>
        <Panel header="我爱美女" name="1">
          {text}
        </Panel>
        <Panel header="我爱美女" name="2">
          {text}
        </Panel>
        <Panel header="我爱美女" name="3">
          {text}
        </Panel>
      </Collapse>

我要在collapse里判断activeName里包含name的react组件添加一个属性，然后我们在panel里通过这个属性来隐藏和显示一个类名

• collapse.tsx

const Collapse: React.FunctionComponent<Props> = (props) => {
  // 只需要把我们的每一个组件通过React.cloneElement克隆一下，然后第二个参数就是我们要加的属性
  const cloneElement = (child: ReactElement, active: boolean): ReactElement => {
    return React.cloneElement(child, {active})
  }
  return (
    <div className={sc('wrapper')}>
      {props.children.map((node) =>
        <div key={node.props.name}>
          {
            props.activeName.includes(node.props.name) ?
             <div>{cloneElement(node, true)}</div>
              :
              <div>{cloneElement(node, false)}</div>
          }
        </div>

      )}
    </div>
  )
}

• panel.tsx
• collapse.tsx

<div className={sc({'active': props.active!}, {extra: 'wrapper'})}>
</div>

2. 所有跨函数跨状态的变量全部使用ref，不要用state
   比如：

const lastYRef = useRef(0)
const onTouchStart: TouchEventHandler = (e) => {
    lastYRef.current = e.touches[0].clientY
  }
  const onTouchMove: TouchEventHandler = (e) => {
    const deltaY = e.touches[0].clientY - lastYRef.current
  }