小编Ale*_*ex 的帖子

我们将使用dockersetup开发一个react pwa，并在部署到master分支期间将应用发布到gitlab页面上。

我在Windows设备上工作，无法在开发人员模式下获得热重载的功能。每当我进行一些更改时，代码都不会重新编译。我必须docker-compose up --build每次都进行每次更改。

有什么可能的方法使windows/docker/create-react-app设置上的热重加载工作？

在package.json之后：

 {
  "name": "Appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "buildandserver": "react-scripts build && serve -s build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

现在，用于开发人员设置的Dockerfile：

FROM node:9.6.1
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app …

我使用react-responsive-modal 在我的 react 应用程序中打开一些模态。当我打开模态时，有一个叠加效果使模态后面的背景变暗。有没有办法使背景变暗 100% 或为背景设置任何颜色，这样我就看不到打开模态之前存在的东西，直到我再次关闭模态？

我ModalComponent在 my 中为模态创建了一个新组件，MainComponent当我单击按钮时会呈现该组件：

ModalComponent：

render() {
 return (
  <div className="childDiv">
    <Modal
      open={open}
      onClose={this.onCloseModal}
      center
      classNames={{
        transitionEnter: styles.transitionEnter,
        transitionEnterActive: styles.transitionEnterActive,
        transitionExit: styles.transitionExitActive,
        transitionExitActive: styles.transitionExitActive
      }}
      animationDuration={1000}
    >
   ...

主要组件：

<div>
    <div className="outter" onClick={this.openModal.bind(this)}>
//Open Modal when clicking on this div
      <p className="arrival">Ankunft am Ziel: ~ {this.props.arrival} Uhr</p>
      <p className="price">max. {this.props.price} €</p>
      {this.state.open && (
        <BookingModalNew
          open={this.state.open}
          triggerCloseModal={this.closeModal.bind(this)}
          destination={this.props.destination}
          arrival={this.props.arrival}
          price={this.props.price}
        />
      )}
//Whole Stuff should not be visible while …

我是反应的新手，甚至是反应路由器的新手，我创建了一个反应应用程序，其中包含一些路线，但有些路线需要相同的数据（道具）。我想在当前页面上按下按钮时通过 onClickEvent 传输这些道具。我读到了一些尝试，例如将按钮上的 onClick 侦听器绑定到类似的方法

handleOnClick(){    
  this.props.history.push('/booking')
 ))

重定向到名为“预订”的路线。但是如何将当前页面的单个道具或整套道具传递给这个新页面？对此有什么解决方案，我如何访问重定向路线上的道具？

这是我的 Index.js，很快会添加更多路由：

const routing = (
 <Router>
   <div>
    <Route exact path="/" component={App} />
     <Route path="/booked" component={Booked} />
   </div>
 </Router>
 );

ReactDOM.render(routing, document.getElementById("root"));

路由树应如下所示： 我的 App.js 中有一个主视图，用于呈现 BookingItems 的组件。在 Bookingitem 中，我有多个道具。当我预订一些项目时，我应该被重定向到我的 Booked.js 组件。

在任何 BookingItems 中，我都有一个按钮，它应该重定向到 Booked.js。

预订项目：

onButtonClick() {
  this.props.history.push("/booked");
 }

render(){
 return(
          <div className="alignCenterDiv">
            <button
              onClick={this.onButtonClick.bind(this)}
              align="center"
              className="buttonBooking"
            >
              Buchen
            </button>
          </div>
)}

预订：在这里，我想访问我在 BookingItems 中或我在预订项目中创建的任何道具以将其传递给 Booked。

我希望文本具有模糊的白色背景。但我实际上正在努力应对模糊效果。每次我尝试使用滤镜模糊时，div 都会变得模糊，但我的文本会消失。

这是我迄今为止用 tailwindcss 编写的代码：

<div class="inline-block">
          <div class="px-1 filter blur bg-white bg-opacity-75">
            <span
              class="font-bold text-black-dark text-sm leading-17px z-1003"
            >
              {{ dynamicText }}
            </span>
          </div>
        </div>

它应该是这样的：

因为文本是动态的，所以我无法为父 div 元素设置固定的宽度或高度。有人可以帮助我实现上述期望的结果吗？