小编Dim*_*nis的帖子

我有这个示例组件

import React, { FC, ReactNode, useMemo } from "react";
import PropTypes from "prop-types";

type Props = {
  children: ((x: number) => ReactNode) | ReactNode;
};

const Comp: FC<Props> = function Comp(props) {
  const val = useMemo(() => {
    return 1;
  }, []);

  return (
    <div>
      {typeof props.children === "function"
        ? props.children(val)
        : props.children}
    </div>
  );
};

Comp.propTypes = {
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
};

export default Comp;

我的意图是children组件的道具可以是

• a node，它被描述为

  任何可以渲染的东西：数字、字符串、元素或包含这些类型的数组（或片段）。

• a function, （或“渲染道具”），它只是从组件内部获取一个值并返回另一个node

这里的重点是明确的， …

我想modularizeImports在一个库上使用 Next.js 编译器的选项，该库的桶文件从库包内的多个目录导出。

我的意思是index.ts库的文件看起来像这样：

//index.ts
export {default as SomeComponent} from './components/SomeComponent';
export {default as someFun} from './utils/someFunction';
export {default as someHook} from './hooks/someHook';

理想情况下我想要这样的东西

//next.config.js
  modularizeImports: {
    '@some/library': {
      transform: '@some/library/dist/(components|hooks|utils)/{{member}}',
    },
  },

但

1. 我不确定这个功能是否可行
2. 如果是的话我不知道该怎么写。

我还尝试向它传递一个转换数组，但它只接受一个字符串。

在幕后，此选项是通过https://docs.rs/handlebars/latest/handlebars/afaik实现的

我目前正在潜入Redux水域,自从我明白减压器的概念简单之后,我不得不说我很兴奋.

然而,我在标题上提出的问题令我感到奇怪.

既然状态对象的不变性是Redux的核心支柱,那么该.getState()方法不应该返回一个副本currentState,这样它就不会暴露在环境中,从而无法改变它吗？

在我的 React 项目中，./根目录在哪里，我已经配置了 webpack，以便我可以从我的./src目录中导入任何文件。

例如，考虑以下目录结构：

./
|-src/
| |-components/
| | |-Button/
| | | |-index.js
| | | |-Button.jsx

其中src/components/Button/index.js仅包含以下内容：

export { default } from './Button';

现在假设我在 中创建了另一个组件src/components/NewComponent，其结构类似于src/components/Button，但在我的内部我NewComponent.jsx正在执行以下操作：

import Button from 'components/Button'

上面的编译很好，因为我已经正确设置了我的 webpack。

我想什么是能够做到的，是VSCode能够带我去定义Button组件时，我alt+click对这个词Button的的import发言，并带我到index.js文件的内容时，我alt+click的components/Button一部分。

我似乎无法做到这一点。

jsconfig.json在撰写本文时，我的情况如下：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    }
  }, …

我有一个通过插件使用 CSS 模块的组件babel-plugin-react-css-modules。

在组件生命周期的某些时刻，我希望能够通过直接访问 DOM 来计算它的新维度。

在我的 SCSS 样式表中，我有一个名为的类.full-width，我想将其应用于组件的 DOM 元素，以便进行计算，然后再次将其删除。

现在，由于添加类并稍后删除它不会影响组件或其状态，因此我想通过直接访问 DOM 来添加和删除类，而不是通过某种方式将其与组件的相关联。state。

如果我这样做，则会将this.DOMReference.classList.add('full-width');类full-width添加到其中，但我想添加该类的模块化版本，因为如果我这样做了，它将被应用styleName="full-width"（例如Component__full-width___Pjd10）

.full-width有没有办法在不进行全局声明的情况下做到这一点？

我可以用 来做到这一点吗react-css-modules？

根据我对文档的理解，如果我props.values从组件实例内部访问，我应该得到一个描述表单每个字段中的值的对象。

值：对象

表单中所有字段的当前值。

就我而言，我需要访问一个值，以便重定向到类似

signup?email=theemailvalue

在表单提交时。

但是，当我访问时，props.value我得到一个空对象。

我在这里做错了什么？

我有一个 Provider 组件，它的值通过钩子导出。

我所描述的简单实现是这样的：

// SomeProvider.jsx
const SomeContext = React.createContext(null);

function SomeProvider(props) {
  const [state, setState] = useState(null)

  useEffect(() => {
    //some logic
    setState(newValue)
  }, [props.someValue])

  return <SomeContext.Provider value={state} {...props} />;
}

const useSome = () => React.useContext(SomeContext);

export { SomeProvider, useSome };

现在，如果我想在多个地方使用这个上下文提供者怎么办？例如

// App.jsx
<SomeProvider someValue={valueOne}>
  <SomeComponent />
</SomeProvider>
<SomeProvider someValue={valueTwo}>
  <SomeOtherComponent />
</SomeProvider>

哪里valueOne和valueTwo可能会发生变化

// SomeComponent.jsx
import { useSome } from 'SomeProvider';

function SomeComponent() {
  const someValue = useSome();

  return ....
}

// …

我正在使用这个反应库：https : //github.com/reactjs/react-tabs，我创建了一个简单的组件，如下所示：

export default class Sample extends Component {

    componentDidMount() {
        console.log("Mount");
    }

    render () {
    return (

            <div>
             Hello
            </div>
    );
  }
}

我已将其插入示例应用程序的选项卡中：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Sample from './Sample.jsx';

class App extends Component {
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (


      <Tabs …