标签: react-tsx

我试图在Github上将我的应用程序部署到Heroku但是收到错误:

./src/Index.tsx中的错误找不到模块:错误:无法解析'/ app/src'中的'./ConfigureStore'@ ./src/Index.tsx 9:23-50

我在Heroku上部署时看起来像Typescript问题.

虽然,在我的本地和webpack工作完美生成捆绑和应用运行良好.下面是我的webpack.config:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const rootModulePath = "./src/";

module.exports = {
    stats: { modules: false },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css']
    },
    entry: {
        'DIG': rootModulePath + "Index.tsx"
    },
    externals: {
        jQuery: 'jQuery'
      },
      node: {
        fs: 'empty'
      },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
          }),
        new webpack.IgnorePlugin(/\.\/locale$/),
        new CheckerPlugin()        
    ],
    devtool: 'source-map',
    output: {
        path: …

我正在练习打字稿。对于后端，我使用了 node express typescript，对于前端，我使用了 react typeScript。我从后端获取数据并尝试在我的浏览器上呈现它。我收到一个错误：property 'name' does not exist on type 'never'. TS2339。我认为这个错误来自打字稿。这是错误可视化

这是我的后端设置

import express = require("express");
import cors = require("cors");
const app = express();
app.use(cors());
const port = 8080;
app.get("/", (req, res) =>
  res.send([
    {
      name: "John",
      age: 36
    },
    {
      name: "alex",
      age: 27
    }
  ])
);

app.listen(port, () => console.log(`server running port ${port}`));

这是我的 React 组件

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

interface StateProperties {
  name: string;
  age: number;
} …

我正在尝试初始化 JavaScript SDK 以最终使用 Facebook Graph API。但是一直这么说Cannot find name FB，不知道为什么。这是我所做的，

componentDidMount() {
    (window as any).fbAsyncInit = function() {
        FB.init({ // this FB errors out
            appId            : "my-app-id",
            autoLogAppEvents : true,
            xfbml            : true,
            version          : "v2.11"
        });
    };

    (function(d: any, s: any, id: any) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return; }
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "facebook-jssdk"));
}

PS我正在使用TSLint，这就是为什么我拥有所有这些typedef any

在我的React（v16.3）应用程序中，我正在使用material-ui-pickers库的DatePicker组件呈现日期选择器控件。该组件呈现Material-UI TextField组件。我喜欢更改此设置，因此它仅呈现Material-UI，Input而不会呈现chrome TextField。

正如我理解的就可以向该与DatePickers TextFieldComponent场（这里在底部），但我无法弄清楚如何使用这个领域。

 <DatePicker 
     id={name}
     TextFieldComponent={...<HOW_TO> ...}
     value={value} 
     onChange={this.handleChange}
     disabled={isReadOnly} />

任何想法如何做到这一点？

更新： 通过找到要使用的正确语法而不是没有chrome的渲染（，等）FormControl，进一步向前迈进了一步InputLabel。但是也不再打开DatePicker。我是否需要以编程方式打开它？

<DatePicker 
    id={name}
    TextFieldComponent={(props) => this.renderInput(props)}
    value={value} 
    onChange={this.handleChange}
    disabled={isReadOnly} />

这是renderInput（）：

renderInput(props: TextFieldProps): any {
   return ( <Input
     id={props.id}
     value={props.value}
     onChange={this.handleChange}
     type={'text'}
     disabled={props.disabled}
   /> );
 }

因此，现在我们不能将挂钩用作事件函数的旧样式，除了禁用警告之外，调用不违反规则的事件函数的最佳方法是什么

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> // Lambdas are forbidden in JSX attributes due to their rendering performance impact (jsx-no-lambda)
        Click me
      </button>
    </div>
  );
}

在我的 React 应用程序（带有打字稿）中，我想使用 React 钩子（特别是 useState）来管理表单状态，同时将其用作 Mobx 商店的可观察组件，但出现错误

钩子只能在函数组件的主体内部调用。

所以例如在以下组件中

import * as React from "react";
import { inject, observer } from "mobx-react";
import { MyStore } from "./MyStore";

interface IProps {
  myStore?: MyStore;
  id: string;
}

const MyComponent: React.FC<IProps> = props => {
  const [state, setState] = React.useState("");
  return (
    <div>
      <h1>{props.id}</h1>
    </div>
  );
};
export default inject("myStore")(observer(MyComponent));

我看到了一个解决方案，但它React.createContext用于导出商店类。是不是 Mobx 和 Hooks 的旧方法？

这是示例的沙盒

我试图在调用函数时出错，这只是为了练习，所以我将所有内容都保存在App.tsx 中。我的课是这样的：

enum Actor {
  None = '',
}

const initializeCard = () => {
  //some logic here
  return card;
}

export default class App extends Component<{}, State> {
  state: State ={
    card: initializeCard()
  }

  public renderRows = () => {
    const { card } = this.state;
    board.map((actor, index) => this.renderRow(actor, index));
  }

  public renderRow = (actor: Actor, index: number) => {
    return(
      <div className="cell">

      </div>
    )
  }

  public render() {
    return (
      <div className="App">
        <div>
            { this.renderRows() …

当组件克隆其子组件并向其注入 props 时，如何定义子组件的 props 类型？

我收到错误原因injectedProps预计在Child

const Parent: React.SFC<ParentProps> = ({ children }) => (
  <div>
    {React.cloneElement(children[0], { injectedProp: 'foo' })}
  </div>
);

const Child: React.SFC<ChildProps> = ({ injectedProp }) => (
  <div attr={injectedProp} />
);

type ChildProps = {
  injectedProp: string;
};

<Parent>
  <Child />
</Parent>

子项错误：injectedProp缺失

如何在用Vite打开的react-ts项目中正确导入Bootstrap？正确的命令是什么？

在 App.tsx 中导入引导程序后，我在浏览器中遇到此错误：

custom.css 文件如下所示：

$theme-colors: (
  "primary": #407BFF
);

$body-bg: #E5E5E5;
$body-color: #263238;

@import '~bootstrap/scss/bootstrap.scss';

我对故事书和打字稿都很陌生，在创建一个采用两个参数 Story 和 context 的装饰器时，我陷入了困境。

const CustomDecorator = (Story, context) => {
  console.log("My Decorator");
  return (
      <Story />
  );
};

const preview: Preview = {
  decorators: [CustomDecorator],
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },

  globalTypes: {
    theme: {
      description: 'Global theme for components',
      defaultValue: 'light',
      toolbar: {
        // The label to show for this toolbar item
        title: 'Theme',
        icon: 'circlehollow',
        // Array of plain string values or MenuItem shape …