小编bau*_*ion的帖子

所以我在React Context + Typescript上遇到了一个很奇怪的问题。

工作实例

在上面的示例中，您可以看到我正在尝试做的实际工作。本质上，我正在使用新的useContext方法管理状态，并且它运行完美。

但是，当我尝试在盒子上执行此操作时，似乎无法找到通过useReducer传递的状态值。

export function AdminStoreProvider(props: any) {
const [state, dispatch] = useReducer(reducer, initialState);
// state.isAuth is avail here
// state.user is avail here
const value = { state, dispatch };
// value.state.isAuth is avail here
return (
    /* value does not contain state once applied to the value prop */
    <AdminStore.Provider value={value}>{props.children} 
    </AdminStore.Provider>
   );
}

错误信息：

Type '{ state: { isAuth: boolean; user: string; }; dispatch: 
Dispatch<Actions>; }' is missing the following properties from type …

正如标题所示,我正在寻找一种方法来为QPainterPath的不同颜色的子路径着色,这些颜色应用于QGraphicsPathItem,或者只是使用QGradient QPen沿PathItem更改颜色.

最终我试图找到正确的解决方案,这将使我能够明显地绘制一条线,根据外部变量改变颜色.

我正在使用QGraphicsScene来绘制所有内容.

我目前的解决方案让我创建了多个QGraphicsPathItems,每个QGraphicsPathItems的颜色与各自的QPens不同.当我获取数据时,我填充与那些PathItems相关联的PainterPath.这给了我需要的多彩线条,但线条明显断开.

我需要能够在颜色更改期间使QPainterPath的子路径不可见,或者更改应用于单个PathItem的渐变.或者也许还有另一种我想念的方法.任何帮助都会很精彩.

-编辑:

正如我的问题的解决方案中所述,这就是我目前正在进行绘图的方式.再次注意,我正在使用GraphicsScene.

GraphicsScene中的方位公式计算产生不稳定的结果

这就是我想要做的.

正如您所看到的那样,线条在外部变量绘制时会改变颜色.我担心Qgradient可能不起作用,因为线条并不总是笔直的; 颜色需要沿着线条流动.

以下是发生的事情:

如您所见,红线(PathItem)从最后可见的位置跳到新位置.

为了更好地澄清行为,想象一下这条线是随着时间的推移而绘制的.它从红色开始,很快变量被设置并且绘制的线段的颜色变为橙色.该行的红色部分保持不变,因此我们可以从历史上看到当时该变量的状态.在不同的时间,变量调整并且应用于线的新部分的颜色相应地更新.

当线条完成绘制后,我们可以查看它并查看颜色何时发生变化.

我希望这一切都有道理.

正如你在我的例子中看到的

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

function App() {
  const items = ["this", "that", "those", "them", "these", "thisins"];

  const messagesRef = React.useRef(null);
  const scrollToBottom = () => {
    messagesRef.current.scrollIntoView({
      behavior: "smooth"
    });
  };

  React.useEffect(() => {
    if (messagesRef.current) {
      scrollToBottom();
    }
  }, [messagesRef]);

  return (
    // Page is overflowing, set height to mimic a full page
    <div className="App" style={{ marginTop: 70, height: 800 }}>
      {/* now set this div to overflow scroll with a small height */}
      <div …