Question

我希望styled-components生成的HOC在其属性之一更改时重新呈现。我正在使用MobX进行更改检测。

这不能适应变化，我想我理解原因。问题是，是否有一种简单的解决方法可以使其正常工作。

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

Answer 1

很难用这个小片段来说明，但是我的猜测之一是您没有注入任何商店，因此目前没有商店与您的组件连接。

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

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

您知道容器/演示模式吗？这是缺少的链接。

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

通过这种方式，您可以分离状态问题，并仅渲染状态已更改的组件。

更新： https://codesandbox.io/s/zxx6o2pq3l

Answer 2

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

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>
    );
  }
}

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

因此，它实际上是扩展组件的扩展；只有包装的变量才适用！

样式化组件对象无法观察Mobx的变化

2 个答案: