标签: react-props

我正在研究一个反应原生的项目,在那里我很难理解道具在功能组件之间是如何工作的.我的要求是创建一个可重复使用的按钮组件,我可以在项目中的资源文件中传递图像位置,因此它将为我创建按钮.出于某种原因,如果我手动提供所需的位置,它将工作并为我创建按钮,但如果我\我通过位置作为道具从我创建它不会工作由于某种原因.我的代码如下.

按钮组件

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';

const ButtonWithImage = (props) => {
    const {buttonStyle} = styles;
    const clickEvent = () => {}

    return (
        <TouchableOpacity onPress= {clickEvent}style={buttonStyle}>
            <Image 
                source={props.imagePath} 
                style={styles.ImageIconStyle} 
            />
        </TouchableOpacity>
    );
};

const styles = {
    buttonStyle: {
        //alignSelf:'stretch',
        height: 50,
        width:50,
        paddingTop:0,
        flexDirection: 'row'
    }
};

export default ButtonWithImage;

我创建按钮并通过道具的地方

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Dimensions,
} from 'react-native'; …

在 React 中，我有类似的文件

--parent.js
--child.js
--App.js

parent.js包含文本框和按钮

child.js包含 P 标签

App.js包含父组件和子组件

问题

在按钮单击时将来自父级的文本框值传递给子级并在子段落标记中显示该值。

完整代码 堆栈闪电战

我有一个React Wrapper组件，它接受一些道具，但将所有其他道具转发给子组件（尤其是对诸如className，id等本机道具的相关事件）。

但是，当我通过本地道具时，打字稿抱怨。查看错误消息：

TS2339：类型'IntrinsicAttributes和IntrinsicClassAttributes <包装器>＆只读<{子代？：ReactNode; }>和Readonly <WrapperProps>”。

如何获得带有特定道具的组件，该组件也接受本机道具（不接受任何道具并放弃类型检查）？

我的代码如下所示：

interface WrapperProps extends JSX.IntrinsicAttributes {
  callback?: Function
}

export class Wrapper extends React.Component<WrapperProps>{
  render() {
    const { callback, children, ...rest } = this.props;
    return <div {...rest}>
      {children}
    </div>;
  }
}

export const Test = () => {
  return <Wrapper className="test">Hi there</Wrapper>
}

仅供参考：我在这里找到了类似的问题，但是答案基本上是放弃类型检查，我想避免这种情况：链接到SO-Question

我正在使用TypeScript编写React应用程序。我将material-ui用于组件。我正在为material-ui的Button组件编写自定义包装。看起来像这样：

import MUIButton, { ButtonProps } from "@material-ui/core/Button";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import classNames from "classnames";
import React, { PureComponent } from "react";
import styles from "./styles";

export interface OwnProps {
  color: "primary" | "danger" | "warning" | "transparent";
  size: "sm" | "lg";
}

export interface Props
  extends WithStyles<typeof styles>,
    OwnProps,
    ButtonProps {}

export class Button extends PureComponent<Props> {
  render() {
    const { color, size, classes, children, ...rest } = this.props;
    const btnClasses = classNames({
      [classes.button]: true, …

我正在像这样在 React.js 代码中进行 proptype 检查

const { a, b ,c } = this.props

a, b, c我的对象或来自 API 的响应在哪里

在我的 propTypes 中检查我的代码看起来像

ComponentName.propTypes = {
a: PropTypes.objectOf,
b: PropTypes.objectOf,
c: PropTypes.objectOf,
};

在 Default PropTypes 中像这样分配它

ComponentName.defaultProps = {
a: {
key1: '',
key2: '',
},
b: {
key3: '',
key4: '',
},
},

但是当我编译代码时它给了我这个错误

prop 的类型规范a无效；类型检查器函数必须返回null或Error但返回一个函数。您可能忘记将参数传递给类型检查器创建者（arrayOf、instanceOf、objectOf、oneOf、oneOfType 和 shape 都需要参数）

请有人帮忙从控制台中删除此警告，解决方法是什么

我有一个功能组件（用 Typescript 编写），需要将处理函数传递给子组件。这是父函数的缩小版本：

type Props = { handleLocationChange(): void };

const Sidebar: React.FC<Props> = (props) => { 
 const handleLocationChange = () => {
    console.log('Location Changed.');
  };
return (
   <>
      <Search handleLocationChange={handleLocationChange} /> 
   </>
)
}

在 VS Code 中，搜索组件显示错误：

类型 '{handleLocationChange: () => void; }' 不可分配给类型 'IntrinsicAttributes & {children?: ReactNode; }'。类型“IntrinsicAttributes & {children?: ReactNode;”上不存在属性“handleLocationChange” }'.ts(2322)

任何帮助将非常感激。我确信我错过了一些小事。

我知道 React Fragment 可用于对子组件进行分组，如下所示：

render() {
  return (
    <React.Fragment>
      <Foo />
      <Bar />
      <Baz />
    </React.Fragment>
  );
}

但是你可以给它添加道具吗？假设您要使用扩展运算符：

<React.Fragment {...otherProps}>
  ...
</React.Fragment>

我有一个像这样的通用组件

const Img = ({ component }) => {
  const image_ref = useRef()

  return (
  <>
    {component
      ref={image_ref}
    }
  </>
  )
}

我想将它与其他像这样的组件一起使用

const MyImg = () => <Img component={<MySpecificImg />} />
const MyBackImg = () => <Img component={<MySpecificBackImg />} />

有没有办法做到这一点？

需要的是能够改变<Img/>组件调用的组件

在父 React 组件中创建状态对象并使用 useContext 在嵌套组件之间上下传递数据有什么缺点吗？这会消除对道具的需求吗？似乎是一种更简单、更合乎逻辑的数据组织方式。此方法是否有任何性能或其他问题？

IM在阵营打字稿一个初学者，我已经定义了一些道具是一个.JS，我想在一个使用的文件.tsx文件。但我在我的 TypeScript 行之一上收到此错误：

 <MyTextField style={{width:'60%'}}  name='ActivationDate' type='date' defaultValue={values1.ActivationDate} onChange={handleChange('ActivationDate')}/>

Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | ((event: ChangeEvent<HTMLSelectElement>) => void) | ((event: ChangeEvent<HTMLTextAreaElement>) => void) | undefined'.

CodeSandbox 包含我的 JS 文件和 TSX 文件：https ://codesandbox.io/s/tsx-rj694

似乎是什么问题，我该如何正确编写？