时间戳

首页 > 解决方案 > 如何在反应中合并传递道具和默认道具？

javascript - 如何在反应中合并传递道具和默认道具？

问题描述

在我的简单create-react-app

我有这个传入的道具

dummyConfig: {
    prop_1: {
      prop_1_1: "100",
      prop_1_2: "100"
    }
  }

在我的应用程序的默认道具中，我有

dummyConfig: {
    prop_1: {
      prop_1_1: "prop_1_1",
      prop_1_2: "prop_1_2"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    }
  }

我想在 App.js 中有一个最终的道具来跟随，所以我可以使用它。

final

dummyConfig: {
    prop_1: {
      prop_1_1: "100",
      prop_1_2: "100"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    }
  }

github链接

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const dummyConfig = {
  prop_1: {
    prop_1_1: "100",
    prop_1_2: "100"
  }
};

ReactDOM.render(
  <React.StrictMode>
    <App
      // sys
      systemConfig={{ systemConfig: "systemConfig" }}
      // app
      applicationConfig={{ applicationConfig: "applicationConfig" }}
      // dummy
      dummyConfig={dummyConfig}
    />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

应用程序.js

import React from "react";
import PropTypes from "prop-types";

function App(props) {
  //test
  console.log("props", props);

  return <div className="App"></div>;
}

App.defaultProps = {
  systemConfig: {},
  applicationConfig: {},
  dummyConfig: {
    prop_1: {
      prop_1_1: "prop_1_1",
      prop_1_2: "prop_1_2"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    }
  }
};

App.propTypes = {
  systemConfig: PropTypes.object.isRequired,
  applicationConfig: PropTypes.object.isRequired
};

export default App;

当我做 console.log 我只看到。使用 prop 和 default prop 有什么方法可以实现？

{
  "systemConfig": {
    "systemConfig": "systemConfig"
  },
  "applicationConfig": {
    "applicationConfig": "applicationConfig"
  },
  "dummyConfig": {
    "prop_1": {
      "prop_1_1": "100",
      "prop_1_2": "100"
    }
  }
}

标签： javascriptreactjs

解决方案

除了提供App默认的 props 字段外dummyConfig，您还可以在函数内部设置一个“默认值”dummyConfig作为变量。

例如：

function App(props) {
  //test
  const dummyConfig = {
    prop_1: {
      prop_1_1: "prop_1_1",
      prop_1_2: "prop_1_2"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    },
    ...props.dummyConfig
  }
  // dummyConfig will now be a merge with your props, and "default value"

  return <div className="App"></div>;
}

App.defaultProps = {
  systemConfig: {},
  applicationConfig: {},
  dummyConfig: {}
};

App.propTypes = {
  systemConfig: PropTypes.object.isRequired,
  applicationConfig: PropTypes.object.isRequired
};

如果您希望您的状态根据传入的道具更改，您可以执行以下操作：

const defaultDummyConfig = {
  prop_1: {
    prop_1_1: "prop_1_1",
    prop_1_2: "prop_1_2"
  },
  prop_2: {
    prop_2_1: "prop_2_1",
    prop_2_2: "prop_2_2"
  },
}

function App(props) {
  //test
  const [ dummyState, setDummyState ] = useState({
    ...defaultDummyConfig,
    ...props.dummyConfig
  });

  // update the new state if the prop ever changes
  // this way, dummyState will always contain what you want (if it's your desired effect)
  useEffect(() => {
    setDummyState({...defaultDummyConfig, props.dummyConfig})
  }, [props.dummyConfig])

  return <div className="App"></div>;
}

推荐阅读