小编Mah*_*aji的帖子

我在 React 项目中使用 redux 表单，这是已初始化 redux 表单的应用程序组件：

import { Field, reduxForm } from 'redux-form';

const onSubmit = (values) => {
    alert(JSON.stringify(values));
};
function App(props) {
    return (
        <div className="App">
            <form onSubmit={props.handleSubmit}>
                <div>
                    <label htmlFor="firstName">First Name</label>
                    <Field name="firstName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="lastName">Last Name</label>
                    <Field name="lastName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="email">Email</label>
                    <Field name="email" component="input" type="email" />
                </div>
                <button type="submit">Submit</button>
            </form>
            {props.number}
            <button onClick={() => props.callAction()} />
        </div>
    );
}


App = reduxForm({
    form: 'contact',
    onSubmit
})(App);

但我在控制台中收到此错误，该错误来自反应严格模式： …

我有一个名为 override 的反应组件：

function Overlay({ isOpen }) {
  if (!isOpen) return null;
  return (
    <div
      style={{
        background: "rgba(0,0,0,.7)",
        position: "fixed",
        zIndex: 1,
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
      }}
    ></div>
  );
}

它获得一个名为 isOpen 的 prop 来显示或隐藏自身。问题是它突然出现和消失，我希望它有某种像 1 秒这样的过渡，这样它就有一个出现和消失的动画。

如何将过渡动画应用到该组件？

我在索引 js 中获取帖子列表，如下所示：

const Index = (props) => {
    return (
        <div>
            {props.posts.map((each) => {
                return (
                    <Link scroll={false} as={`/post/${each.id}`} href="/post/[id]" key={each.id}>
                        <a>
                            <h1>{each.title}</h1>
                        </a>
                    </Link>
                );
            })}
        </div>
    );
};

export async function getStaticProps() {
    const url = `https://jsonplaceholder.typicode.com/posts`;
    const res = await axios.get(url);

    return {
        props: { posts: res.data }
    };
}

当用户单击任何链接时，它会转到帖子页面：

function post({ post }) {
    return (
            <h1>{post.id}</h1>
    );
}

export async function getServerSideProps({ query }) {
    const { id } = query;
    const res …

我正在尝试为所有文本设置一种字体系列，如下所示：

索引.css 文件：

:root {
    font-family: 'Vazir', sans-serif !important;
}

但它并不适用，我必须适用font-family: 'Vazir', sans-serif !important;于每个组件 css 文件。

如何对字体系列进行一次编码并将其应用于每个组件文本或如何设置适用于在 React js 中呈现的所有文本的全局字体系列样式？

我最近在我的 macos 系统上安装了 python，当我尝试打开 python 文件时，我看到有关 Jupyter 扩展的错误弹出窗口：

我正在尝试将宽度参数传递到样式表中，如下所示：

      <View style={styles.children(width)}>{children}</View>

并像这样使用它：

 
const styles = StyleSheet.create({
  modalContent: {
    flex: 1,
    justifyContent: 'center',
    margin: '5%',
  },
  modalOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  children: (width: any) => ({
    width: width,
    backgroundColor: 'white',
    position: 'absolute',
    bottom: 0,
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
    paddingVertical: 30,
    paddingHorizontal: 20,
  }),
});
,

但是打字稿抛出错误This expression is not callable. No constituent of type 'ViewStyle | TextStyle | ImageStyle' is callable.

我该如何解决这个打字稿问题？

我尝试获取调用的更新状态localstorage，但是当我控制台将其登录到其中的函数时，会给出内部设置的默认值：darkmodeuseContextApp.tsxContext.js

应用程序.tsx：

const { darkmode } = useContext(Context);

React.useEffect(() => {
  console.log(darkmode);
}, []);

上下文.js：

import { useState, useEffect, createContext } from "react";

const Context = createContext();

function ContextProvider({ children }) {
  const [darkmode, setDarkmode] = useState(false);

  // Local Storage: setting & getting data
  useEffect(() => {
    const darkmode = JSON.parse(localStorage.getItem("darkmode"));
    if (darkmode) {
      setDarkmode(darkmode);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("darkmode", JSON.stringify(darkmode));
  }, [darkmode]);

  const toggleDarkmode = () => {
    setDarkmode((prev) => !prev); …

成功合并请求后，分支在 gitlab 上被删除，但它仍然存在于我的本地计算机上，那么我如何在本地删除该分支？

如何仅在本地删除 config-tailwind 分支？

我已经像这样配置了温斯顿记录器：

import winston from "winston";
const { SqlTransport } = require("winston-sql-transport");

const transportConfig = {
  client: "mysql2",
  connection: {
    host: "localhost",
    user: "root",
    password: "Mahdi54321",
    database: "todos",
    // port: "3307",
  },
  tableName: "logs",
};

const alignColorsAndTime = winston.format.combine(
  winston.format.colorize({
    all: true,
  }),
  winston.format.label({
    label: "[LOGGER]",
  }),
  winston.format.timestamp({
    format: "YYYY-MM-DD HH:mm:ss",
  }),
  winston.format.printf(
    (info) => `${info.label} ${info.timestamp} ${info.level} : ${info.message}`
  )
);

export const logger = winston.createLogger({
  level: "debug",
  transports: [
    new winston.transports.Console({
      format: winston.format.combine(
        winston.format.colorize(),
        alignColorsAndTime
      ),
    }),
    new winston.transports.File({ …

我在带有依赖项的功能组件内使用 useEffect 钩子，以便依赖项发生变化，useEffect 函数将像这样重新运行：

const [show, setShow] = React.useState(false);

React.useEffect(() => {
 
    console.log("Do something")

} , [show]);

我想知道 React 的类组件中有什么可以做到这一点？有没有任何生命周期方法可以实现此功能？

我使用自定义函数将数字转换为阿拉伯语格式，如下所示：

 const numbers = `??????????`;
  const convert = (num) => {
    let res = "";
    const str = num.toString();
    for (let c of str) {
      res += numbers.charAt(c);
    }
    return res;
  };

它的工作原理是这样的：

console.log(convert(123)) // ==> ???

当有一个带小数的数字并将其转换为没有小数点的阿拉伯格式时会出现问题，例如：

console.log(convert(123.9)) // ==> ????

我希望输出为?????.

如何将带有小数的数字转换为带有我的函数中包含的小数点的阿拉伯格式？

我有一个文本可重用组件，编码如下：

import React, {FC, ReactNode} from 'react';
import {StyleSheet, Text as RNText} from 'react-native';

interface TextProps {
  style?: any;
  children: ReactNode | ReactNode[];
}

const Text: FC<TextProps> = ({style, children}) => {
  return <RNText style={{...styles.text, ...style}}>{children}</RNText>;
};

export default Text;

const styles = StyleSheet.create({
  text: {
    color: colors.black,
    fontFamily: fonts.light,
  },
});

因此，每次我想要对其进行样式设置时，我都没有得到任何关于对 React Native 文本组件进行样式设置的道具建议：

如何使用 typescript 获取自定义可重用组件的所有反应本机样式道具建议？

我想在两行中显示帖子描述，并在末尾添加省略号。我实际上复制了检查 youtube css styles 所需的样式。Youtube 样式适用于所有浏览器，例如 safari 和 iOS 设备浏览器。

我在 React js 中使用内联样式，如下所示：

                       <span
                          style={{
                            lineHeight: "2rem",
                            fontWeight: "500",
                            maxHeight: "4rem",
                            overflow: "hidden",
                            display: "-webkit-box",
                            textOverflow: "ellipsis",
                            whiteSpace: "normal",
                            WebkitLineClamp: 2,
                            WebkitBoxOrient: "vertical",
                            msTextOverflow: "ellipsis",
                          }}
                        >
                          {description}
                        </span>

问题是它不适用于 macbook safari 浏览器或任何 iOS 设备浏览器，但它与 youtube 具有相同的 css 样式。

如何确保这些样式适用于 iOS 设备浏览器和 safari？是不是少了点什么？