小编Den*_*ash的帖子

如何在 create-react-app 中设置导入快捷方式/别名？由此：

import { Layout } from '../../Components/Layout'

对此：

import { Layout } from '@Components/Layout'

我有一个webpack4.42.0 版本。我的根目录中没有 webpack.config.js 文件。我试图用下面的代码自己创建一个：

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    }
  }
};

但它似乎不起作用。我已经NODE_PATH=.在.env文件中看到了变体。但我相信，它已被弃用 - 最好不要使用。而且，我有一个posstcss.config.js文件。因为我已经安装了 TailwindCss 并在那里导入了 CSS 库。我试图在那里粘贴相同的代码，但它也不起作用。

我想弄清楚如何设计我使用react-icons.

特别是，我希望能够创建与此类似的外观：

也就是说，我想添加背景颜色、填充、边框半径等。但是，我找不到一种简单的方法来做到这一点。

我可以添加一个大小和颜色道具，这将改变图标的​​实际大小和颜色。但是我没有简单的方法来改变其他元素。

有谁知道我该怎么做（或者他们可以推荐一个可以帮助我解决这个问题的不同图书馆）？

所以我对 node.js / react / material-ui 还很陌生。我一直在按照指南尝试建立一个网站，并且进展顺利。我决定为时髦的组件（不是指南的一部分）包含 material-ui，然后卡住了，因为在使用主题 ui 时我似乎无法触发自定义函数。

使用下面的代码，如果我放弃“类”道具，我可以创建一切正常。我可以添加我的功能，一切正常。但如果我这样做，我显然会失去所有的造型。

const styles = theme => ({
    // Styling - omitted
});

const Login = (props) => {

    const {classes} = props;

    return(
        <div>
            <Paper className={classes.root}>
                <form className={classes.container} noValidate autoComplete="off">
                    <TextField
                        id="email"
                        label="Email"
                        className={classes.textField}
                        InputProps={{
                            className: classes.input
                        }}
                        type="email"
                        name="email"
                        autoComplete="email"
                        margin="normal"
                        variant="outlined"
                        required
                        autoFocus
                    />
                    <TextField
                        id="outlined"
                        label="Password"
                        className={classes.textField}
                        InputProps={{
                            className: classes.input
                        }}
                        type="password"
                        autoComplete="current-password"
                        margin="normal"
                        variant="outlined"
                        required
                    />
                    <Typography className={classes.divider} />
                    <Button
                        type="submit"
                        variant="contained"
                        color="inherit"
                        className={classes.button}
                    >
                        Login …

这是我的错误边界文件 -

class ErrorHandling extends Component {
    state = { hasError: false }

    componentDidCatch() {
        this.setState({ hasError: true })
    }

    render() {
        // debugger
        if (this.state.hasError) {
            return <div>Error in Component</div>
        }
        return this.props.children
    }
}

另一个文件是-

import React, { Component } from 'react';

// Intentionally I have added syntax error below 'd'

function Intermediate(props) {
    return <h1>hi</h1>;d
}
export default Intermediate

在我的 App.js 中

<ErrorHandling>
  <Intermediate />
</ErrorHandling>

它导致应用程序在没有捕获错误的情况下中断。这是在浏览器屏幕上看到的错误

更详细的版本在这里 - https://codepen.io/meghana1991/pen/abojydj?editors=0010

当我在本地使用与上面列出的多个文件相同的代码时，它不起作用

我是打字稿的新手，当我尝试useEffect在 react 中使用打字稿时出现错误Argument of type '() => () => boolean' is not assignable to parameter of type 'EffectCallback'.，任何人都可以帮助我为什么会出现此错误？我把我的代码放在这里，任何帮助将不胜感激，

const useIsMounted = () => {
        const isMounted = React.useRef(false);
        React.useEffect(() => {
          isMounted.current = true;
          return () => isMounted.current = false;
        }, []);
        return isMounted;
    };

我想知道，当你有两个发生了什么props，并useState在一个组件。

我写了一个小例子，它有一个父组件用另一个子组件打印它的数字 -

const MyNumbers = (props) => {
  const [numbers, setNumbers] = useState([...props.arr]);

  function changeNumbers() {
    setNumbers((nums) => [...nums.map(() => Math.floor(Math.random() * 10))]);
  }

  return (
    <div className="MyNumbers">
      <div>
        <button onClick={changeNumbers}>Chane numbers</button>
      </div>
      <div>
        {numbers.map((num, idx) => (
          <SingleNumber key={idx} num={num}></SingleNumber>
        ))}
      </div>
    </div>
  );
};

const SingleNumber = (props) => {
  const [num] = useState(props.num);
  useEffect(() => {
    console.log("useEffect called");
  });
  return <h3>The number is {num}</h3>;
};

这是上面的演示

该SingleNumber组件使用useState并且如您所见，单击“更改数字”操作不会更改子组件中的值。

但是，当我编写几乎相同的代码但现在 …

我希望 VSCode 能够智能感知模块路径，以便我可以通过单击访问它。

例如，配置后jsconfig.json我可以./src/styled/index通过导入其全局路径来访问。

但我不知道如何使它与别名一起工作 @styles

// VSCode Intellisene Works
import { mixins, theme } from 'styles';

// VSCode Intellisene Doesn't work
import { mixins, theme } from '@styles';

我的当前jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "paths": {
      "@styles": ["src/styles/index"]
    }
  }
}

我正在尝试使用 @reduxjs/Toolkit 触发一个简单的操作，但它不起作用。

我看到该操作已调度，但就像切片减速器没有监听它或其他什么。

const say = createAction("ui/say", what => ({ payload: what }));

const uiSlice = createSlice({
  name: "ui",
  initialState: { said: "" },
  reducers: {
    [say.type]: (state, action) => {
      console.log("saying", action.payload); //<-- not showing, why?
      state.currentList = action.payload;
    }
  }
});

const store = configureStore({
  reducer: combineReducers({
    ui: uiSlice.reducer
  })
});

const Chat = () => {
  const dispatch = useDispatch();
  const [whatToSay, setWhatToSay] = useState("");
  const whatWasSaid = useSelector(state => state.ui.said);

  const onSubmit = e => …

我无法弄清楚为什么调用recSetTimeOut()不会导致堆栈溢出错误，而recPromise()会导致堆栈溢出错误。

const recSetTimeOut = () => {
  console.log('in recSetTimeOut');
  setTimeout(recSetTimeOut, 0)
};
recSetTimeOut();

const recPromise = () => {
  console.log('in recPromise');
  Promise.resolve().then(recPromise);
}
recPromise();

为什么会发生？它们之间有什么区别？

你能解释一下幕后的过程吗？

编辑更多信息

在Node.js v12.1.0和运行以下代码段Chrome DevTools：

const recSetTimeOut = () => { setTimeout(recSetTimeOut, 0); }
recSetTimeOut();

结果Node：无错误。

结果Chrome：无错误。

const recPromise = () => { Promise.resolve().then(recPromise); }
recPromise();

结果Node：

严重错误：无效的表大小分配失败-JavaScript堆内存不足

结果Chrome：浏览器崩溃。

我要评论使用时,可以预期Ctrl+/,它的工作原理为Java ,但不是 Kotlin代码,如提及我已经做了帮助台(注:我使用Intellij Ultimate 2018.2)

要在Java中配置注释行为的设置,请使用位于"文件"|"代码生成"选项卡上的"注释代码"部分中的选项 设置/首选项| 编辑| 代码风格| Java的.

标记Add a space at comment start为Commented Code部分,我找不到任何注释代码配置Kotlin Code Style

例如Kotlin:

fun main(args: Array<String>) {
    // Desired comment
//    After Using Ctrl+/
}

但适用于Java:

public class Sample {
    public static void main(String[] args) {
        // Works fine using Ctrl+/
    }
}