如何在React Typescript中使用其他组件中的函数
在React Typescript中使用其他组件中的函数，可以通过以下步骤实现：
- 导入需要使用的组件：首先，在你的React Typescript文件中，使用import语句导入需要使用的组件。例如，如果你想使用名为"ComponentA"的组件中的函数，可以这样导入：
import { functionName } from './ComponentA';- 调用组件中的函数：一旦你导入了需要使用的函数，就可以直接在你的React组件中调用它。例如，如果你想在React组件中调用"ComponentA"中的函数"functionName"，可以这样做：
functionName();- 传递函数作为props：如果你想在一个组件中使用另一个组件中的函数，并将其作为props传递给子组件，可以通过以下步骤实现：
- a. 在父组件中，将函数作为props传递给子组件。例如：
- a. 在父组件中，将函数作为props传递给子组件。例如：
- b. 在子组件中，通过props接收函数，并在需要的地方调用它。例如：
- b. 在子组件中，通过props接收函数，并在需要的地方调用它。例如：
这样，你就可以在React Typescript中使用其他组件中的函数了。
对于React Typescript中使用其他组件中的函数的详细说明和示例，你可以参考腾讯云的React Typescript文档：React Typescript文档。
请注意，以上答案中没有提及云计算品牌商，以遵守你的要求。
相关·内容
我为内部项目创建了某种基本系统，我使用OOP方法实现了一个自定义表单系统，就像我使用TypeScript一样。
class Form extends React.Component {}
abstract class FormElement extends React.Component<{validations?:ValidationLogic[]}> {
validate();
setData();
setValidation();
}
class FormText extends FormElement {}
提到这些：
我想知道，是使用类的缺点纯粹是主
浏览 1提问于2018-03-17得票数 0
回答已采纳
1回答
我已经使用React很长一段时间了，现在我想切换到使用。然而，我已经习惯了JSS风格(通过react-jss包)，我不明白我应该如何在TypeScript中使用它们。我还使用classnames包，有条件地分配多个类名，并获得相应的TypeSCript错误。
以下是我的React组件模板：
import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';
const styles =
浏览 3提问于2020-01-06得票数 5
回答已采纳
我正在尝试创建一个简单的页面，其中包括两个主要部分：Menu和Guide。在我的App,tsx中，我有：
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
这很好。
但是，在./Guide/Guide.tsx中，我有：
import React, { Component } from
浏览 3提问于2021-12-20得票数 0
回答已采纳
我希望对我的PascalCase项目中JSX.Element类型的变量强制使用React+Typescript。我经常使用以下模式来创建功能组件，并且我喜欢通过给它一个PascalCase名称来区分我的同名导出：
//MyComponent.tsx
//PascalCase for MyComponent
export const MyComponent= (): JSX.Element =>{
return (
<div>
My Component
</div>
)
}
export default MyComponen
浏览 2提问于2021-06-02得票数 3
回答已采纳
我习惯于将React组件连接到Redux，如下所示： 在index.js中： import { connect } from "react-redux";
import { doThing } from "store/actions";
import Component from "./component";
const mapState = (state) => {
const { foo } = state;
return {
foo
};
};
const mapDispatch = {
doThing,
浏览 24提问于2020-04-24得票数 1
回答已采纳
当我试图使用TypeScript将一种反应组件导入另一种反应组件时发生React.lazy错误
templates/BugReport/index.tsx
import { useEffect, useContext } from 'react';
import BugReportStatic from '@tamm/ui-lib-v2-bug-report';
import baseUrl from 'client/utils/baseUrl';
import { StoreContext } from 'client/services
浏览 10提问于2021-08-30得票数 1
我正在学习react-query，我遇到了一些问题。我想使用通过useQuery获取数据所获得的useQuery，但我将data作为undefined。这是我的代码：
import React from "react";
import { useQuery } from "react-query";
import { fetchData } from "./providesData";
const Home = () => {
const {data} = useQuery("fetchData", fetchData,
浏览 4提问于2021-06-27得票数 11
回答已采纳
我正在使用来自React Router v4的路由组件的render props使用Typescript和React实现经过身份验证的路由。 路由： import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { ROUTES } from 'utils/constants';
import HomePage from 'components/pages/Home';
import GuestLogin from '
浏览 17提问于2020-08-18得票数 3
回答已采纳
1回答
我正在构建一个包含一些组件的React UI库，比如按钮、输入、文本等，让我们称之为mylib。我将在许多项目中重用它，比如在myApp中。我将使用TypeScript，因此我必须将其编译为ES6。它将使用.less文件进行样式设置。
我的问题是关于.less文件的。我不知道正确的方法是什么:我应该用myLib还是myApp编译它们？是否可以只使用TypeScript编译器，或者因为任何原因也使用Webpack更好？我试过了，但我不确定是不是正确的。
我的想法是在myLib中编译TypeScript，但让myApp编译.less文件:我将源代码放在src文件夹中，然后使用TypeScript编
浏览 1提问于2019-09-13得票数 0
我想在现有的javascript项目中创建一些typescript组件。我的新组件将全部放在一个文件夹中，并将使用react-typescript编译器，而不是其他组件使用的react编译器。如何将此编译器定义到整个文件夹(以及其中的所有组件)，同时将现有编译器保留在项目中所有现有的bit组件上？
浏览 4提问于2019-12-18得票数 2
2回答
当使用Typescript在React中定义道具时，默认的React道具似乎会被任何界面所覆盖。有没有一种干净利落的方法来合并这两种方式，而不必指定React已经知道的每一个属性？
示例：
interface IProps { // extends React.???
title: string;
// Generally seen adding children?: any
// But this can get out of hand with onClick, onChange, etc
}
function MyComponent(props: IProps) {
浏览 0提问于2017-11-01得票数 2
我对ReactJS和TypeScript比较陌生，在创建允许我调用方法的react组件方面可能需要一些帮助，并意识到我可能会有很多错误。下面是我的代码。 import { SomeExternalPackage } from "@external";
interface MyServiceProviderProps {
isInternal: boolean;
isEnabled: boolean;
}
export const MyServiceProvider: React.FC<MyProviderProps>
浏览 10提问于2021-03-18得票数 0
在使用样式组件和VSCode时，我遇到了一个奇怪的问题。下面基本上是我从任何来自样式组件的组件中得到的，它们都返回任何。
我之前让它工作了，但是我不知道什么时候，我也看不到所有组件返回任何错误的设置中有什么问题。我试图移回tslint配置，删除/注释掉eslintrc文件中的所有规则，但也无法使其工作。
令人惊讶的是，我尝试了我在我的项目中使用的，其中的类型可以与原始设置一起工作。
我尝试使用相同版本的样式化组件包，但仍然不能正常工作。任何关于这个问题的帮助或方向都将非常受欢迎！
.eslintrc.js
module.exports = {
env: {
b
浏览 2提问于2020-08-08得票数 2
有人能帮我吗？我正在使用TypeScript，StyledComponent和React来创建React应用。此错误发生在生成期间，无法清除。
// browser and terminal error
TypeScript error in ./src/index.tsx(4,1):
Type '{ alt: string; src: string; }' is not assignable to type 'IntrinsicAttributes'.
Property 'alt' does not exist on type '
浏览 2提问于2019-10-10得票数 0
我一直将React组件(使用typescript)定义为：
function MyComponent(props: PropsType): React.ReactElement | null {
//...
}
我在网上看到了很多这样的例子：
const MyComponent: React.FC = (props: PropsType) => {
//...
}
我知道它们几乎是一样的，但在Typescript社区中首选的约定是什么？
浏览 2提问于2019-08-13得票数 5
我需要根据在配置文件中找到的一些字符串，在我的代码中动态插入一些重要的UI图标。我发现了一种在这里应该有效的技术：https://medium.com/@Carmichaelize/dynamic-tag-names-in-react-and-jsx-17e366a684e9 然而，当我尝试React Functional Components + Typescript时，我得到了奇怪的错误： ? 我如何使用Typescript来实现这一点？这些类型真的让我着迷。 本质上，我想像这样使用这个组件： <ListItemIcon>
<SideNavIcon na
浏览 12提问于2021-03-30得票数 0
回答已采纳
我知道这里也有类似的问题：
但我正在使用TypeScript。
此代码：
import { injectIntl, intlShape } from 'react-intl';
ChildComponent.propTypes = {
intl: intlShape.isRequired
}
对我不起作用。
如何用格式化的消息设置这个位置持有者。
<InputPass
placeholder="Enter password"
/>
浏览 1提问于2018-03-30得票数 3
回答已采纳
我试图改变我的客户端呈现的反应应用程序，以便在服务器端呈现。我使用的是React和TypeScript。以下是错误：
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you
浏览 6提问于2022-10-11得票数 1
回答已采纳
我完全是一个来自Angular Typescript背景的反应新手。我选择用Typescript学习React是为了让我的转换比用javascript学习react更容易。谁能让我知道很好的基础视频反应与打字。有关于复数视线的基本视频，但可以使用javascript演示它。
我已经使用create- react -app命令创建了一个应用程序，其中包含react项目的框架。
我注意到这个文件有下面的const声明，而我在视频中看到的例子显示了一个带有render方法的类声明。有人能解释一下吗？
Scafolded输出
import React from 'react';
imp
浏览 2提问于2019-08-13得票数 1
使用带有for的TypeScript，我们不再需要扩展React.Props，以便编译器知道所有React组件道具都可以有子组件：
interface MyProps { }
class MyComponent extends React.Component<MyProps, {}> {
public render(): JSX.Element {
return <div>{this.props.children}</div>;
}
}
但是，对于无状态功能组件，情况似乎并非如此：
const MyStatelessComponent =
浏览 2提问于2016-11-22得票数 139
回答已采纳
我看到了一些堆栈溢出的主题，但它们总是使用函数组件。我想知道如何在TypeScript中生成自定义url，比如带有类组件的。我试试看：
路由中的路径是'/user/:userUID‘
interface IURLInfo {
userUID: string
}
interface IProps extends RouteComponentProps<IURLInfo> {
}
interface IState {
}
class ShipsBoyBoatDashboard extends React.Component<IProps, IState&
浏览 1提问于2020-08-22得票数 1
回答已采纳
我有一个由Create-React-App创建的react项目，其中包含以下包(提到与我的问题相关的包)：
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"typescript": "^3.9.2",
"@typescript-eslint/eslint-plugin
浏览 168提问于2020-05-17得票数 16
回答已采纳
2回答
在App.tsx中，我将<Left />和<Right />传递给一个名为<SplitScreen />的导入组件
显然，“子”道具需要显式输入，因为响应18。如果我将其键入为React.Element[]，那么SplitScreen.tsx可以工作，但App.tsx抛出：
Type 'Element' is not assignable to type 'ElementType<any>'
如果我键入它为React.ReactNode (这似乎是目前的共识)，App.tsx可以工作，但是SplitScreen.t
浏览 6提问于2022-08-21得票数 0
我可以在typescript类中使用react钩子吗？(不是React类，而是一个经典的util typescript类？)
实际情况是，我在一个类中添加了很多useHistory，并且我需要添加一个util来添加来自一些函数的导航。
浏览 0提问于2020-10-07得票数 1
我正在尝试为typescript中的React编写一个更高阶的函数：(1)需要被包装的组件的某些属性(2)允许在包装器上设置包装的组件属性(3)具有特定于包装器的属性 我基本上可以正常工作，但是当我在封装组件的匿名类上设置默认属性时，我从typescript中得到了一个我无法解决的错误。 我得到的错误是： src/withContainer.tsx:33:3 - error TS2322: Type 'typeof (Anonymous class)' is not assignable to type 'ComponentClass<P & Conta
浏览 106提问于2019-02-07得票数 3
回答已采纳
我正在学习TypeScript，有些地方让我很困惑。有一点如下：
interface Props {
name: string;
}
const PrintName: React.FC<Props> = (props) => {
return (
<div>
<p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
{props.name}
</p>
</div>
浏览 2提问于2020-01-30得票数 151
回答已采纳
我刚刚开始用TypeScript编写反应测试代码，
Login.test.tsx
import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
describe('Login', () => {
const login = shallow(<Login />);
});
Type '{}' is missing the following properties f
浏览 2提问于2020-08-20得票数 0
回答已采纳
1回答
在此代码中：
function Component({
onChange,
}: {
onChange: (event: React.ChangeEvent) => void;
}) {
return <input onChange={onChange} />;
}
function Field<
ComponentProps extends {
onChange: (event: React.ChangeEvent) => void;
onBlur: (event: React.FocusEvent) => void;
浏览 4提问于2021-10-21得票数 0
在我的样式组件上获取类型记录错误
类型'{子:字符串；}‘没有与类型’IntrinsicAttributes‘..ts(2559)相同的属性。
import React from 'react'
import { NotificationSuccess, NotificationError } from '../../styles'
interface IProps {
error?: boolean;
message: string;
}
export const Notification = (props: IProps) =&
浏览 0提问于2019-03-12得票数 36
回答已采纳
我用create-react-app my-app --typescript创建了react。 然后我在本地安装了typescript模块。 ../typescript-module/A.ts export default class A {
} App.ts import A from 'typescript-module/A';
console.log(A); 我尝试将typescript模块导入到我的react应用程序中。但它会显示错误，如under。 ./node_modules/typescript-module/A.ts
Module parse failed:
浏览 18提问于2019-10-19得票数 1
我正在学习如何使用React-TypeScript，我对React.FC和泛型如何协同工作感到困惑。 因此，我有几个与以下代码相关的问题(一个返回列表项的函数组件)： 1.)你必须将道具作为泛型传递吗？或者你可以简单地写下 const TodoListItem: React.FC = (props) => {
//code
} 2.)todo是如何从<TodoListItemProps>中解构出来的？ 3.)为什么没有定义返回类型？它不应该写成： const TodoListItem: React.FC<TodoListItemProps> = ({todo})
浏览 37提问于2020-12-08得票数 0
(转载于)
我猜这是@types/react和LazyExoticComponent定义的问题...
在带有类型参数的组件上使用React.lazy()时，Typescript无法再编译项目。
给定组件：
import React from "react";
export interface Props<T> {
value: T;
valueCallback: (t: T) => void;
}
export default function TypedComponent<T>(props: Props<T>) {
r
浏览 10提问于2020-05-08得票数 7
2回答
我试图使用TypeScript将钩子实现到React (^16.6.0)应用程序中
import * as React, {useState} from 'react';
知道这个导入的正确语法是什么吗？
浏览 0提问于2018-11-21得票数 11
回答已采纳
我在我的项目中使用typescript已经有一个月了，我一直在努力解决一些疑惑。 有没有一种模式/推荐的方法来组织项目架构中的类型？ 假设我们有一个包含以下接口的上下文： export type ToastMessageType = 'info' | 'success' | 'error';
export interface ToastMessageData {
id: string;
title: string;
description: string;
type: ToastMessageType;
}
export i
浏览 19提问于2020-06-14得票数 13
回答已采纳
2回答
为了提供一些条件呈现逻辑，我试图将现有的react组件(React)封装到一个高阶组件(HoC)中。我面临的困难是让TypeScript生成一个将HoC包装器和包装组件属性结合在一起的组件。
例如：
import React from "react";
import Select from "react-select";
interface HOCProps {
foo: string
}
// Return a type with the HOCProps properties removed.
type WitoutPrefilled<T e
浏览 0提问于2019-03-03得票数 2
回答已采纳
4回答
如果我在我的项目中添加了@type/styled组件，那么构建输出中就会出现一堆错误：
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property de
浏览 0提问于2019-02-15得票数 30
回答已采纳
你好，我想把道具从index.html传递给App.tsx，正如你所看到的，我使用的是typescript。所以我想用typescript来做。
我的代码
//index.html
<div id="root" name="test"></div> //props name test
//Index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import A
浏览 1提问于2020-09-07得票数 1
我在学react-typescript
代码-
import {phones} from "../../get_phone";
interface IProps {
phone: phones,
}
const Query1: React.FC <IProps> = ({phone}) =>
{
console.log(phone)
const [model, setmodel] = useState(phone);
console.log(model);
}
是否可以从其他组件和其他typescript文件访问m
浏览 17提问于2021-05-24得票数 0
2回答
export function TodosContextProvider( {children}: {children: React.ReactNode}, props: any) {
const [todos, dispatch] = React.useReducer(todosReducer, [
{
Id: 1,
Title: 'Learn Context API',
Done: true
},
{
Id: 2,
Title: 'Lear
浏览 3提问于2020-02-28得票数 0
回答已采纳
我整个上午都在为这个问题苦苦挣扎，在任何地方都找不到解决方案。我刚开始使用typescript，我正在尝试用Eslint和更漂亮的工具正确地设置它，以确保代码格式正确。
所以，我在创建功能组件时所面临的问题。根据小抄，我正在尝试导出一个简单的组件，例如：
import React from "react";
type DivProps = {
text: string;
};
const Div = ({ text }: DivProps): JSX.Element => (<div>{text}</div>)
export defaul
浏览 7提问于2021-11-11得票数 23
回答已采纳
在我为Angular 2找到的示例中，每个应用程序可以创建一次组件：
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
浏览 2提问于2016-02-10得票数 4
我正在与我的团队一起建立一个React项目，它将使用mobX作为状态管理器，并使用TypeScript。
我在框中看到了一个常见的模式，并在React项目中看到了命名模式：
非响应文件夹和文件：camelCase或kebab-case
React (在components文件夹中)：PascalCase
react中是否有文件夹/文件命名的正式约定？如果没有，是否有样式指南作为此模式的基础？或者是为什么这个在大多数时候都被使用？
浏览 0提问于2019-03-18得票数 40
回答已采纳
我在一个使用Firebase进行身份验证的React应用程序中使用TypeScript。在使用TypeScript之前，我对Firebase部分使用了一个常规上下文，这很好。但是，现在我已经添加了TypeScript，我得到了错误。
例如，下面是我的SignIn组件(为了简洁起见省略了一些部分)：
import React, { Component } from 'react';
import Firebase, { withFirebase } from '../Firebase';
const SignInForm = (firebase:
浏览 2提问于2021-02-19得票数 0
回答已采纳
我正在尝试为DropdownIndicator创建自定义组件，并在带有Typescript的react-select上使用，但我对组件的类型有一些问题，因为我不熟悉typescript。
如何在组件上使用@ types /react-select上定义的类型？
我已经安装了@types/react-select，并且已经有了一个，但是我没有找到引用它的方法。
这是我的index.tsx
import React from 'react';
import Select from 'react-select';
import DropdownIndicator f
浏览 0提问于2019-08-18得票数 6
我如何输入一个typescript变量，以便它需要一个设置了key的组件？ 我想要这样的东西： const foo: ReactElementWithKey = <div key="some key"></div>
// all ok
const bar: ReactElementWithKey = <div></div>
// no `key` - typescript should show an error 我应该如何定义ReactElementWithKey？ 我尝试过这样的方法： type ReactElemen
浏览 45提问于2021-09-07得票数 0
我是第一次接触React，我只是偶然发现了令人惊叹的Blueprint组件。但是，我无法使用它，并且我被安装指南搞糊涂了。这与我到目前为止所使用的是完全不同的。
谁能给我解释一下如何在没有Typescript的情况下使用Blueprint？
浏览 4提问于2017-01-31得票数 1
您可以使用以下代码在TypeScript中定义React功能组件的类型：
export const Component: React.FC = () => {
return // Stuff
};
如何对非箭头函数执行相同的操作？
function Component() {
return // Stuff
}
练习有什么不同吗？这份流行的小抄并没有涵盖它，所以我想知道是否有理由不使用这种语法？
浏览 2提问于2019-09-11得票数 13
我有子组件：
import * as React from "react";
import {Component} from "react";
import {connect} from "react-redux";
class Child extends Component<any, any> {
childFunction = () => {
console.log('childFunction');
};
render() {
return &l
浏览 16提问于2019-07-13得票数 0
我正在尝试将一个带有一些道具的功能组件发送到另一个组件，并在接收组件中尝试键入检查该组件中的一些道具。代码如下：
// BaseButton.tsx
export type ButtonProps = {
label: string
size?: 'sm' | 'md' | 'lg' | 'normal'
icon?: React.FC<{ size?: number; foo: string }>
} & React.ButtonHTMLAttributes<HTMLButtonEleme
浏览 23提问于2020-05-15得票数 2
回答已采纳
3回答
我正在使用React 和Jest来测试我的React/Redux应用程序。
我想在多个测试中测试相同的组件，而不是在每个实例之间共享组件的状态。
就像这样..。
import React from "react";
import {renderWithRedux} from '../testUtils';
import App from "../components/App";
describe("App", () => {
test("does something as expected", a
浏览 0提问于2019-12-09得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
