Javascript 样式化组件对象可以'；观察不到mobx的变化

我希望生成的HOC在其属性之一发生更改时重新渲染。我正在使用MobX进行变化检测

这对变化没有反应，我想我明白为什么。问题是，是否有一个简单的解决办法使其发挥作用

const DemoComponent = observer(styled.div`
  background-color: ${props => props.myObject.myObservableIsTrue ? 'red' : 
'green'};
`);

---

通过这个小片段很难判断，但我的猜测之一是您没有注入任何存储，因此目前没有存储连接到您的组件

下面是一个简单的示例，说明我如何在mobx中使用样式化组件（如果有帮助）：

编辑： 我已经更新了代码示例

你知道容器/呈现模式吗？ 这是缺失的一环

为了使渲染尽可能少 您需要将有状态组件彼此分离。 将它们分布在容器组件（又称哑组件）上

通过这种方式，可以分离状态关注点，并仅呈现状态已更改的组件

更新：

---

对不起！！！有点像黑客，但尝试将您的整个代码放入@inject（“store”）类中：

从“React”导入React；
从“mobx react”导入{observer，inject}；
导入样式化，{css}来自“样式化组件”；
@注入（“存储”）
@观察者
导出默认类OtherComponent扩展React.Component{
render（）{
常量MyWrapper=（存储）=>{
const Wrapper=styled.div`
边框：1px纯黑；
显示器：flex；
证明内容：之间的空间；
颜色：${（{color}）=>color}；
边框：2px实心${（{color}）=>color | |“black”}；
填充：10px；
边缘底部：10px；
`;
返回(
样式化组件
变色
);
}
const{store}=this.props；
返回(
{
MyWrapper（商店）
}
);
}
}

Mobx实际上是这样读的：@inject（“store”）@observer导出默认类

---

所以它实际上是一个扩展组件的扩展；只有包装的变量才适用

我的代码片段只是一个简化的示例。我编辑了您的示例以再次演示该问题：。关键是，在您的示例中，整个

应用程序

在颜色更改时再次呈现。我想避免这种情况，只是为了渲染

包装器

。是的，我正在尝试减少渲染次数。查看示例中的

OtherComponent

。每次单击“更改颜色”按钮时，它都将重新渲染。我们能就此达成一致吗？但这太过分了-渲染

包装器就足够了。所以我正在努力实现这个目标。在我的示例中，“更改颜色”不起作用。我的问题是，是否有可能在不更改传递到包装器中的道具的情况下使其工作。看这里：stackblitz崩溃了，所以我无法更新，但这有点欺骗：）通过声明
Wrapper
inside
OtherComponent
render函数，您正在使它在其他地方完全无用。所以包装器现在不是一个“真正的”组件。@gamliela谢谢！我的意思是只把包装带到注射剂里面。然后你将“其他组件”替换为“包装器”，然后从“./ReabPultCypult.”Mobx中导入包装器。从商店自动更新组件；因此，你不必传递任何参数。哦，我现在明白你的意思了。是的，这是有效的。我想，虽然不是很有效率，但我不认为这是一个“有效”。由于每次渲染都要创建一个新的组件类，我不确定这种方法是否实用。
import React from "react";
import { observer, inject } from "mobx-react";
import styled, { css } from "styled-components";

@inject("store")
@observer
export default class OtherComponent extends React.Component {

  render() {
    const MyWrapper = (store) => {
      const Wrapper = styled.div`
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  color: ${({ color }) => color};
  border: 2px solid ${({ color }) => color || "black"};
  padding: 10px;
  margin-bottom: 10px;
`;
      return (
        <Wrapper {...store}>
          styled-component
        <button onClick={store.changeColor}>change color</button>
        </Wrapper>
      );
    }
    const { store } = this.props;
    return (
      <div>
      {
          MyWrapper(store)
      }
      </div>
    );
  }
}