小编Gau*_*ngh的帖子

我正在尝试使用 react-router (v5) 在单击按钮时仅更新一个查询参数键值。

const btnClickHandler = () =>{
    history.push({ search: 'popup=false' });
}

我希望此代码从以下位置更新网址：

https://base-url.com/?popup=true&checked=true

到：

https://base-url.com/?popup=false&checked=true

但相反，它将整个搜索替换为：

https://base-url.com/?popup=false

基本上，不是替换所有查询参数键值，我如何只替换一个？

我找不到将标题置于 React Material UI AppBar 中心的方法。也许我错过了一些东西。StackOverflow 上几乎没有其他答案，但这些似乎不是最好的方法。

WebContext.js

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

class WebContextProvider extends Component {
    state = {
        inputAmount: 1,
    };

    render() {
        return <WebContext.Provider value={{ ...this.state }}>{this.props.children}</WebContext.Provider>;
    }
}

export default WebContextProvider;

应用程序.js

const App = () => {

return (
        <WebContextProvider>
            <UpdateBtn />
        </WebContextProvider>
    );
};

export default App;

更新Btn.js

const UpdateBtn = () => {

return (
        <Div>
            <Button onClick={} />
        </Div>
    );
};

export default UpdateBtn;

如何在UpdateBtn.js中单击按钮时更新WebContext.js中存在的inputAmount …

我希望在 React 应用程序最终版本中避免向最终用户显示密钥和秘密。我找到了建议在 docker 中的环境变量文件中保密的方法。下面是到目前为止不起作用的代码。在 React 中无法REACT_APP_SOME_API访问，我也不确定是否使用此方法，秘密将在我不想要的最终构建中可见。

React 中的 Package.json：-

"scripts": {
     "start": "rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090",
     "docker": "rm -rf dist && webpack --mode production && make docker-run",
     "docker-push": "rm -rf dist && webpack --mode production && make docker-push --"
 },

生成文件：-

docker:
    docker build -t app .

docker-run: docker
    docker run -it --env-file ./config.env -p "80:80" app

docker-push: TAG ?= latest
docker-push: docker
    docker tag $(NAME) $(DOCKER_REPO):$(TAG)
    docker push $(DOCKER_REPO):$(TAG) …