小编Men*_*nas的帖子

在编写我自己的基于 JavaScript 的可调整大小面板时，我发现有一个很好的新 CSS3 样式属性可以以更简洁的方式实现此目的。但我使用这种基于 CSS 的方法面临的唯一问题是，它只能从角调整大小，而且还必须从边框调整大小，而不仅仅是角！用户甚至可能没有注意到它可以从角落调整大小。

请不要让我失望，并告诉我没有办法通过 CSS resize 属性来实现这一点！我在w3.org上没有找到足够的信息，但我仍然对此抱有一些希望。

.container{
  background-color: black;
  width: 400px;
  height: 400px;
}

.resizable{
  background-color: lightgray;
  width: 300px;
  height: 400px;
  resize: both;
  overflow: auto;
  min-width: 200px;
  min-height: 200px;
  max-width: 350px;
  max-height: 400px;
}

<div class="container" >
  <div class="resizable">
    <p>Drag the bottom-right corner to resize me</p>
    <p>However, Unfortunately, you can't resize me by dragging any of the right or bottom borders</p>
  </div>
</div>

我需要获取在特定事件上调用的函数内而不是渲染器内的上下文的当前值。

例子：

logCurrentTheme.js

import React, { useContext } from 'react';
import {ThemeContext} from "./ThemeContext";
// ThemeContext is a context created by React.createContext()

function logCurrentTheme() {
  const context = useContext(ThemeContext);
  console.log(context.themeColor)
}
export {logCurrentTheme};

在我的其他一些组件中

//...
import {logCurrentTheme} from "./logCurrentTheme.js";
//...
const someComponent () => {
  return(
    <Button onClick={logCurrentTheme} title="Log Current Theme"/>
  );
}

上面的例子编译成功，但是一旦单击按钮就会抛出错误：

无效的挂钩调用。钩子只能在函数组件体内调用

我知道这是一个“函数”而不是“函数组件”。但我还能怎样做呢？

编辑：

基于@tudor's 答案的工作示例

LogContextButton.js

import React from "react";
import { useContextHelper } from "./ContextHelper";

export const LogContextButton = props => {
  var { logCurrentContextValue …

假设我有一个像这样的函数，但枚举参数有更多可能的值：

enum API{
    userDetails = "/api/user/details",
    userPosts = "/api/user/posts",
    userComments = "/api/user/comments",
    postDetails = "/api/post/details",
    postComments = "/api/post/comments"
    //...
};

function callAPI(endpoint: API/*, some more params*/){
    // some code to deal with the specified endpoint...
}

callAPI(API.userComments);

上面的代码工作正常，但我需要将枚举的许多值分组到一个有组织的层次结构中，以便使事情更有组织性......例如，如果调用 API 的语法可以是callAPI(API.user.comments)代替callAPI(API.userComments).

我尝试了类似下面的尝试，但看起来没有一个被接受为打字稿的有效语法。

尝试1

enum API{
    user = {
        details : "/api/user/details",
        userPorts : "/api/user/posts",
        userComments : "/api/user/comments"
    }
    post = {
        postDetails : "/api/post/details",
        postComments : "/api/post/comments"
    }
}

尝试2

enum user {
    details = "/api/user/details",
    userPorts …