m-zhinanmao-component-helper v0.3.7

m-zhinanmao-component-helper

指南猫辅助组件

使用

If

<If when={false}>
  <div>不显示</div>
</If>

Switch

<Switch value>
  <Switch.Case when={true}>条件1</Switch.Case>
  <Switch.Case when={false}>条件2</Switch.Case>
  <Switch.Case when={true}>条件3</Switch.Case>
  <Switch.Default>默认条件</Switch.Default>
</Switch>

Query

<Query query="/api/user" fetch={fetch}>
  {({ loading, error, data }) => {
    if (loading) return 'loading';
    if (error) return 'error';
    return <User data={data} />;
  }}
</Query>

State

<State initial={{ index: 0 }}>
  {({ state, setState }) => (
    <React.Fragment>
      {arr.map((n: number, index: number) => (
        <FieldItem
          key={index}
          active={state.index === index}
          onClick={() => setState({ index })}
        >
          选项{index}
        </FieldItem>
      ))}
    </React.Fragment>
  )}
</State>

Value

<Value initial={1}>
  {({ value, set }) => (
    <React.Fragment>
      {arr.map((n: number, index: number) => (
        <FieldItem key={index} active={value === index} onClick={() => set(index)}>
          选项{index}
        </FieldItem>
      ))}
    </React.Fragment>
  )}
</Value>

开始

yarn

yarn start

yarn compile

开发

查看 rc-tools