- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在创建一个简单的组件,它接受一个可选的 prop,但也接受任意的 props 传递给它的子组件,但是我无法让这种组合很好地协同工作。我已经修改了此处的示例作为示例:Typescript3 Release Notes
import React from 'react';
export interface Props {
name: string;
[id: string]: any; // <-- Added to allow acceptance of arbitrary props
}
export class Greet extends React.Component<Props> {
render() {
const { name, ...divProps } = this.props;
return <div {...divProps}>Hello {name.toUpperCase()}!</div>;
}
static defaultProps = { name: 'world' };
}
用法:
<Greet />
一旦我添加了具有任意 Prop 的选项,我就收到以下错误
Property 'name' is missing in type '{}' but required in type 'Readonly<Props>'.
我的问题是:
1) 是否有任何已知的方法来接受任意 props 并使 defaultProps 起作用?
2) 这是接受任意 props 的好方法吗?
最佳答案
如果您为内部组件定义了 props,您可以将它们交叉 (&) 在一起,这样您的所有 props 就会具有类型安全性。
type Props = {
name: string;
}
type InnerCompProps = {
color: string,
}
const InnerComp = (props: InnerCompProps) => (<div> the color is { props.color} </div>);
export class Greet extends React.Component<Props & InnerCompProps> {
static defaultProps = { name: 'world' };
render() {
const { name, ...rest } = this.props;
return <InnerComp {...rest} />;
}
}
关于reactjs - Typescript 3、React defaultProps 和 passthrough Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54096222/
如何在defaultProps中引用defaultProps?即 work.defaultProps = { start_date: moment().format('YYYY-MM-DD')
如果我有以下带有 defaultProp 的按钮 export interface IButton { variant: 'action' | 'secondary'; } export cons
我有一个像这样的 Typescript React 类组件: import React, { Component } from 'react'; interface Props { bar?: b
我有一个组件,它具有一个必需属性和一个可选属性。可选属性充当覆盖机制,如果不存在,则默认为从必需属性派生的值。它是这样设置的: function fruitColour(fruit) { swit
我使用 React 很长时间了,我遇到了一个有趣的问题:基本上,我想使用 defaultProps 作为 fallbackProps - 这就是它们的用途,但有一个困难 - 来自无状态/class e
我最近开始使用 React,我倾向于这样定义默认值: class TextInput extends Component { render() { return (
我使用React来编写这个demo。我使用 Webpack 来构建这个演示。当我启动这个演示时,错误将会显示。 ERROR in ./src/app.js Module build failed: S
我正在开发一个包含一些子组件的 React 组件。我希望它有一组默认的子元素,如果它的元素是在没有指定子元素的情况下创建的(即 应该等于 )。 来自https://github.com/faceb
默认情况下,我希望我的 lastMessage 属性是一个带有 id 的对象。但对于下面的代码,它显示为 null。 代码: const App = ({ lastMessage }) => { //
我有一个 Loader 组件,它与 defaultProps 一起按预期工作: const Loader = ({ inner, outer, ...rest }) => { return (
在 ReactJS 中定义一个空函数 defaultProps 的最佳实践是什么? 到目前为止,我的解决方案是空箭头函数 或空值。哪种方式更好? MyComponent.defaultProps =
我可能在做一些愚蠢的事情,但我无法让 defaultProps 起作用。 export default class MyClass extends Component{ static propTy
如果我有一个组件,其 propTypes 如下 import React, { Component } from 'react' import propTypes from 'prop-types'
经过几个小时的搜索和测试,我没有成功找到任何解决方案来让流程理解defaultProps 参见Try Flow example 使用这个模型是不一致的: type PropsType = {| s
当我查看此页面时,我可以看到一个包含组件的 propTypes 和 defaultProps 的表:http://styleguide.pivotal.io/react_components_aler
我有一堆功能性的 React UI 组件。我想为这些组件设置defaultProps。但是,我的组件似乎不应用这些默认 Prop 。下面是一个示例代码: // @flow import React f
我有一个简单的 react 组件,我向它发送一个 bool 属性,例如 但 prop 不会在组件内部发生更改,并且即使我将其传递到元素上也始终为 true @Radium export class
我有两个组件,Section和 Button .我要Section接受Button或 String因为它是 child Prop 。如何指定 Button作为 Section 的默认 children
代码: export default function RoundedLink({ url, text, className, target }) { return ( {t
我正在处理 react-redux 应用程序的一些可访问性问题。 我安装了 npm install eslint eslint-plugin-jsx-a11y@4.0.0 --save-dev 现在,
我是一名优秀的程序员,十分优秀!