小编Fre*_*dy.的帖子

我不是 Javascript 专家，所以我想知道是否有人有一种“优雅”的方式来组合多个减速器来创建全局状态（如 Redux）。当一个状态更新多个组件等时不影响性能的功能。

假设我有一个 store.js

import React, { createContext, useReducer } from "react";
import Rootreducer from "./Rootreducer"

export const StoreContext = createContext();

const initialState = {
    ....
};

export const StoreProvider = props => {
  const [state, dispatch] = useReducer(Rootreducer, initialState);

  return (
    <StoreContext.Provider value={[state, dispatch]}>
      {props.children}
    <StoreContext.Provider>
  );
};

Rootreducer.js

import Reducer1 from "./Reducer1"
import Reducer2 from "./Reducer2"
import Reducer3 from "./Reducer3"
import Reducer4 from "./Reducer4"

const rootReducer = combineReducers({
Reducer1,
Reducer2,
Reducer3,
Reducer4
})

export default rootReducer;

我有一个新项目，但想测试预定的功能。我错过了什么吗？

$ firebase deploy

=== Deploying to 'testing-db'...

i  deploying functions
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
!  functions: missing required API cloudbuild.googleapis.com. Enabling now...
+  functions: required API cloudfunctions.googleapis.com is enabled
+  functions: required API cloudbuild.googleapis.com is enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (24.45 KB) for uploading
i  functions: ensuring required API pubsub.googleapis.com is enabled...
i  functions: ensuring required API cloudscheduler.googleapis.com is enabled... …

我让这个组件出现在按钮单击上。我想知道扩展或弹出动画是否有简单的缓解方法。为了让它在过渡中看起来更平滑而不是出现？

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card style={{ display: show && "none" }}>This is my card</Card>
    </div>
  );
};

我有一个 ErrorBox 组件，它纯粹显示具有指定属性的错误。预期的输出应该取决于ErrorReason它将显示相关的颜色、图标和信息

const ErrorBox = ({ ErrorReason }) => {

  const [status, setStatus] = useState({})
  switch (ErrorReason) {
    case "wrong-password":
      setStatus({
        icon: "lock",
        info: "Incorrect password",
        color: "#fff"
      });
      break;
    case "invalid-email":
      setStatus({
        icon: "cross",
        info: "Invalid email",
        color: "#000"
      });
      break;
    case "too-many-request":
      setStatus({
        icon: "user",
        info: "Too many incorrect requests",
        color: "#bbb"
      });
      break;
  }

  return (
    <div >
       <Icon
        type={status.icon}
        style={{ color: `${status.color}` }}
      />
      {status.info} 
    </div>
  );
};

I have made a basic Tabs component following this documentation here.

This is my current output.

Does anyone know the CSS to align ant-tabs-tab at the center?

I can see that there are different position placement however there isn't a top-center option.

Current CSS:

  .ant-tabs-tab {
    flex-grow: 1;
    margin-right: 0px;
    width: 80%;
    text-align: center;
  }

The output from the above CSS. I would like to keep the same size as the first image but have it center aligned. Not …

我有一些 JSON，如下所示。我想从中获取“类型”为“项目”的所有对象。

 string json = @"
        {
            'name': 'Object 1',
            'content': {
                'body': {
                    'id': 'body',
                    'type': 'Body'
                },
                'style': {
                    'id': 'style',
                    'type': 'Style'
                },
                'DynamicName-123': {
                    'id': 'DynamicName-123',
                    'type': 'Row'
                },
                'DynamicName-434': {
                    'id': 'DynamicName-434',
                    'type': 'Column'
                },
                'DynamicName-223': {
                    'id': 'DynamicName-223',
                    'type': 'Item'
                }
            }
        }";

JObject obj = JObject.Parse(json);

预期输出：

'id': 'DynamicName-223',
'type': 'Item'

我怎样才能做到这一点？