天道酬勤,学无止境

React 中如何使用布尔属性?(How are boolean props used in React?)

问题

我试图澄清一些关于 React 中布尔属性的混淆(最好来自权威​​来源)。

假设一个MyComponent有几个布尔道具prop1 , prop2 ...

首先:似乎布尔道具就像其他道具一样:您可以在 defaultProps 或解构参数中定义默认值:

const MyComponent = ({ prop1, prop2 }) => (
   ...
)

MyComponent.defaultProps = {
  prop1: false,
  prop2: true,
}

或者等效地(不?)

const MyComponent = ({ prop1 = false, prop2 = true }) => (
 ...
) 

不清楚的是如何传递值。 再一次,自然的“React 风格”似乎是

  <MyComponent prop1={ BOOLEAN_EXPRESION1 } prop2={ BOOLEAN_EXPRESION2 } />

...包括静态文字( false/true )。

然而,它也指出传递布尔属性的正确(推荐?)方法是属性的存在/不存在,正如 HTML5 所规定的那样。

因此,应该编写<MyComponent prop1 />而不是<MyComponent prop1={true} prop2={false} /> <MyComponent prop1 />


我的问题是:

  1. 传递布尔道具的正确方法是什么? 两者都可以接受吗?

  2. 如果 HTML5 样式是推荐(或正确)的方式,那么如何处理动态值?

  3. 此外,如果 HTML5 样式是可以接受的,那么默认值呢? 在上面的示例中(默认情况下prop2true ),如果我编写<MyComponent /> ,会发生什么?

回答1

前言:

让我们换个角度思考,无视 HTML5 建立的规则,只关注 JSX。 JSX 有两种传递 true 的方式<MyComponent prop /><MyComponent prop={true} />以及传递 false <MyComponent prop={false} />一种方式。 我同意这是区分 HTML5 和 JSX 的一个奇怪之处,但JSX 是 JavaScript 的语法扩展,而不是 HTML,因此它不需要符合任何 HTML 规则。

来自 JSX 文档:

这个有趣的标签语法既不是字符串也不是 HTML。

仅供参考,JSX 的所有规则和行为都列在 React 的 JSX 文档中,其中包括将 prop 默认为 true 的工作原理。 重要提示:这些文档不从 HTML 继承任何内容,也不应与 HTML 规范进行比较。


答案:

  1. 传递布尔道具的正确方法是什么?

在 JSX 中传递一个显式true

传递显式true方法有两种:传递true和默认 prop 为 true:

<MyComponent prop={true} />
<MyComponent prop />

注意:如文档中所述,JSX 将属性默认为true的行为只是与 HTML5 的布尔属性行为匹配的附加功能。

在 JSX 中传递显式false

传递显式false方法只有一种:传递false

<MyComponent prop={false} />

注意:这是 JSX 的行为与 HTML5 的布尔属性行为不同的地方。 在 JSX 中没有默认为false类的东西; 它仅适用于传递显式true 。 与 HTML5 相比,如果您不传递任何内容,则实际上是在传递undefined ,并且将使用您定义的默认值。 这与 HTML5 规范相反,它会说它是false 。 有关此行为,请参阅 #3 的答案中的 CodeSandbox 链接。

在 JSX 中传递布尔变量/表达式:

将变量或表达式传递给 prop:

// via variable
const foo = true;
<MyComponent prop={foo} />
const bar = false;
<MyComponent prop={bar} />

// via expression
<MyComponent prop={Math.random() > 0.5} />

两者都可以接受吗?

参考传递显式true与默认 prop 为true ,它们在编译 JSX 方面都是可以接受的。 但是,如果您需要在代码库中保持一致性以遵循某种风格,请添加 ESLint 规则jsx-boolean-value 。 我个人使用 Airbnb JavaScript 风格,它开启了这条规则。 该指南强调可读性,因此决定省略显式true

  1. 如果 HTML5 样式是推荐的(或正确的)方式,那么如何处理动态值?

不要对动态值(变量/表达式)使用 HTML5 样式(默认 props 为true ); 使用 React 传递道具的方式(显式分配道具值)。 有关如何通过这些,请参见上文。

  1. 此外,如果 HTML5 样式是可以接受的,那么默认值呢? 在上面的例子中(默认情况下,prop1,prop2 分别为 false/true)会给出什么?

以下是分别传递的prop1prop2的最终值:

MyComponent.defaultProps = {
  prop1: false,
  prop2: true,
}

<MyComponent prop1 />
// prop1 == true
// prop2 == true // defaulted to true

<MyComponent prop1={true} prop2={false} />
<MyComponent prop1 prop2={false} />
// prop1 == true
// prop2 == false

这是 CodeSandbox 链接:https://codesandbox.io/s/elated-davinci-izut1?fontsize=14&hidenavigation=1&theme=dark

注意:不添加属性然后不传递值(例如第一个示例中的prop2 )与传递undefined相同,与为第二个示例传递显式false不同。 因此, prop2被默认为true

回答2

让我告诉你关于传递布尔值

HTML5 样式

<MyComponent
  prop2  // equivalent prop2={true}, works only for static true values
  prop1={false} // You can't do something like that for false though
/>

// example
<Select
  multiSelect // You won't be changing this value throughout the whole life cycle
/>

// They will however transpiled to 
React.createElement(MyComponent, {prop1: false, props2: true}, null)
// So passing true isn't necessarily a must

默认道具

此方法对于布尔值与其他类型没有任何不同

<MyComponent
  title={title} // typeof title = string | undefined | null
  bold={bold} // typeof bold = boolean | undefined | null
/>

// In case title being undefined or null,
// React will take the defaultProps

defaultProps等价于

static defaultProps = {
  title: 'Hello World',
  bold: true
}

props = {
  title: props.title ?? 'Hello World',
  bold: props.bold ?? true
}


// Or in function, it's much simpler and familiar
// Same as old C, if the props are undefined or null,
// default values will be taken, this is plain 'ol JS
const MyComponent = ({title = 'Hello World', bold = true}) => {
  // boop
}


所以总结并回答你的问题

  1. 传递布尔道具的正确方法是什么? 两者都可以接受吗?

是的,两者都可以接受。 React 是没有意见的,这取决于你所遵循的风格,AirBnB 建议你使用 HTML5 风格来​​传递静态true值,而旧的 TypeScript 会尖叫你将其更改为props2={true}

  1. 如果 HTML5 样式是推荐(或正确)的方式,那么如何处理动态值?

HTML5 仅适用于静态true值。 您根本无法在 HTML5 样式中使用动态布尔值。

  1. 此外,如果 HTML5 样式是可以接受的,那么默认值呢? 在上面的示例中(默认情况下 prop2 为 true),如果我编写<MyComponent /> ,会发生什么?

<MyComponent />将被转译为React.createElement(MyComponent, {}, null) ,这意味着prop1prop2将是undefined 。 鉴于prop1的默认值是falseprop2true 。 将采用它们各自的默认值。

回答3

取决于用例。 听说过关注点分离吗? 同样的原则在这里也适用。 在需要处理的地方处理它。 您可以在组件中使用变量而不是defaultProps (React 方式)。 如果它是一个开关,则将其从父级传递下来。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何切换反应组件的布尔状态?(How to toggle boolean state of react component?)
    问题 我想知道如何切换反应组件的布尔状态。 例如: 我在组件的构造函数中进行了布尔状态检查: constructor(props, context) { super(props, context); this.state = { check: false }; }; 每次单击复选框时,我都尝试使用 this.setState 方法切换状态: <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label> 当然我得到一个Uncaught ReferenceError: check is not defined 。 那么我怎样才能做到这一点呢? 提前谢谢了。 回答1 由于没有人发布此内容,因此我发布了正确答案。 如果您的新状态更新取决于之前的状态,请始终使用setState的函数形式,它接受一个返回新状态的函数作为参数。 在你的情况下: this.setState(prevState => ({ check: !prevState.check })); 查看文档 由于这个答案变得流行,添加应该用于 React Hooks (v16.8+) 的方法: 如果您使用的是 useState 钩子,则使用以下代码
  • React Typescript 类组件默认道具接口(React Typescript Class Component Default Props Interface)
    问题 我用一些道具创建了一个简单的类组件。 从 Typescript 3 及更高版本开始,它们声明 defaultProps 默认将使用与组件的 props 本身相同的接口。 参考 在下面的代码示例中,您可以看到我创建了一个组件,使用给定的接口扩展 React.PureComponent。 一种道具被称为布尔类型的布尔值。 然后我得到了static defaultProps分配,我在其中输入了一个字符串而不是布尔值的“意外”错字。 import React from "react"; export interface ExampleClassProps { string: string; arrayOfStrings: { test: string }; boolean: boolean; } class ExampleClass extends React.PureComponent<ExampleClassProps> { static defaultProps = { string: "asd", arrayOfStrings: { test: "asd" }, boolean: "true" //this should throw an error, since I'm assigning a string to type boolean }; render() {
  • 为什么我们不能在 React 中将布尔值作为道具传递,它总是要求在我的代码中传递字符串(why we cannot pass boolean value as props in React , it always demands string to be passed in my code)
    问题 即使我已经应用了 propType 验证,我的编辑器在为hasvacancy道具传递布尔值时也会抛出错误。 这是我所看到的: 错误:'SyntaxError:JSX 值应该是表达式或引用的 JSX 文本' 我知道我正在为“hasvacancy”道具传递一个字符串类型值,但是我需要做什么才能通过道具传递布尔值或其他数据类型。 import React from 'react'; import { render } from 'react-dom'; class VacancySign extends React.Component{ render() { console.log('------------hasvacancy------', this.props.hasvacancy); if(this.props.hasvacancy) { return( <div> <p>Vacancy</p> </div> ); } else { return( <div> <p>No-Vacancy</p> </div>); } } } VacancySign.propTypes ={ hasvacancy: React.PropTypes.bool.isRequired } render(<VacancySign hasvacancy='false'/> , document
  • ReactJS中的动态属性(Dynamic attribute in ReactJS)
    问题 我想动态地包含/忽略按钮元素上的disabled属性。 我已经看到了许多有关动态属性值的示例,但没有看到属性本身的示例。 我有以下渲染功能: render: function() { var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : ""; return <button {maybeDisabled}>Clear cart</button> } 由于出现了“ {”字符,因此引发了解析错误。 如何基于AppStore.cartIsEmpty()的(布尔值)结果包含/忽略禁用的属性? 回答1 当前添加可选属性(包括disabled属性和其他可能要使用的属性)的最简单方法是使用JSX传播属性: var Hello = React.createClass({ render: function() { var opts = {}; if (this.props.disabled) { opts['disabled'] = 'disabled'; } return <button {...opts}>Hello {this.props.name}</button>; } }); React.render((<div><Hello name="Disabled" disabled='true' /> <Hello name=
  • 反应道具 - 如果另一个道具为空/空,则在道具上设置 isRequired(React props - set isRequired on a prop if another prop is null / empty)
    问题 I have a component <Button>. If the component doesn't has this.props.children, I want to set the prop ariaLabel as isRequired, otherwise in can be optional. How do I do that? ariaLabel prop not required: <Button>Add to bag</Button> ariaLabel prop has to be required: <Button ariaLabel="Add to bag" icon={ favorite } /> if this.props.children and this.props.ariaLabel are empty, it throws an error saying that this.props.ariaLabel is isRequired <Button icon={ favorite } /> propTypes: Button.propTypes = { /** icon inside Button. */ icon: React.PropTypes.object, /** Content inside button */
  • 如何将没有价值的道具传递给组件(How to pass props without value to component)
    问题 如何将没有价值的道具传递给反应组件? <SomeComponent disableHeight> {/* here */} {({width}) => ( <AnotherComponent autoHeight {/* and here */} width={width} height={300} {...otherProps} /> )} </SomeComponent> 注意 - 没有为这些道具指定默认道具值。 我似乎找不到任何关于它的引用,但是通过观察这些属性的值,它们默认分配为true 。 回答1 您传递的内容被编译器解释为布尔属性。 编写纯 HTML 时也是如此; 没有值的属性被解释为布尔值true 。 由于 JSX 是用于编写 HTML 的语法糖,因此它具有相同的行为是有道理的。 React 官方文档有以下内容: 布尔属性这在使用 HTML 表单元素时经常出现,具有禁用、必需、选中和只读等属性。 省略属性的值会导致 JSX 将其视为 true。 要传递 false,必须使用属性表达式。 //这两个在JSX是等效的用于禁用的按钮<input type="button" disabled />; <input type="button" disabled={true} />; //这两个在 JSX 中等价于不禁用按钮<input type="button" />;
  • React - 使用三元在功能组件中应用 CSS 类(React - Using ternary to apply CSS class in functional component)
    问题 我对 React 比较陌生,正在开发 John Conway - Game of Life 应用程序。 我已经为棋盘本身构建了一个Gameboard.js功能组件(它是App.js的子App.js )和一个Square.js功能组件,它代表棋盘中的单个方块(并且是Gameboard的子Gameboard和App的孙子项) )。 在App我有一个名为alive的函数,我想在用户单击它时更改单个方块的颜色。 App也有一个 'alive' 属性,它的状态最初设置为 false,并且在调用时, alive会将该属性更改为 true。 这是App.js : import React, { Component } from 'react'; import './App.css'; import GameBoard from './GameBoard.js'; import Controls from './Controls.js'; class App extends Component { constructor(props){ super(props); this.state = { boardHeight: 50, boardWidth: 30, iterations: 10, reset: false, alive: false }; } selectBoardSize =
  • 使用状态与 TypeScript 反应(Using state in react with TypeScript)
    问题 我是 TypeScript 的新手。 我在渲染方法中显示 this.state.something 或将其分配给函数中的变量时遇到问题。 看看最重要的一段代码: interface State { playOrPause?: string; } class Player extends React.Component { constructor() { super(); this.state = { playOrPause: 'Play' }; } render() { return( <div> <button ref={playPause => this.playPause = playPause} title={this.state.playOrPause} // in this line I get an error > Play </button> </div> ); } } 错误说:“[ts] 属性 'playOrPause' 在类型 'ReadOnly<{}>' 上不存在。 我试图将 playOrPause 属性声明为一种字符串,但它不起作用。 我在这里缺少什么才能使它工作? 回答1 您需要声明您的组件正在使用 State 接口,它由 Typescript 的泛型使用。 interface IProps { } interface IState {
  • 为什么在使用 redux 和 react.js 时我的道具“未定义”?(Why are my props `undefined` when using redux and react.js?)
    问题 我尝试向我的应用程序添加一个状态,该状态在某个事件过去时仅保存了一个布尔值。 我无法弄清楚我在这里做错了什么。 减速器: import * as actionTypes from '../constants/action-types.js'; const initialState = [{ eventPassed: false }]; export default function eventPassed(state = initialState, action) { switch (action.type) { case actionTypes.EVENT_PASSED: return true; default: return state; } } 行动: import * as actionTypes from '../constants/action-types'; export function eventPassed(eventPassed) { return { type: actionTypes.EVENT_PASSED, payload: { eventPassed: eventPassed } }; } 组件周围的容器: import React, { Component } from 'react'; import { connect } from
  • 反应:为什么道具改变时子组件不更新(React: why child component doesn't update when prop changes)
    问题 为什么在以下伪代码示例中,当Container更改foo.bar时,Child不会重新呈现? Container { handleEvent() { this.props.foo.bar = 123 }, render() { return <Child bar={this.props.foo.bar} /> } Child { render() { return <div>{this.props.bar}</div> } } 即使在修改Container中的值后调用forceUpdate() ,Child仍会显示旧值。 回答1 更新子项,使其属性“键”等于名称。 每次更改键时,组件都会重新渲染。 Child { render() { return <div key={this.props.bar}>{this.props.bar}</div> } } 回答2 因为如果父项的props发生变化,但是STATE的状态发生变化,则子项不会重新呈现: 您显示的是这样的:https://facebook.github.io/react/tips/communicate-between-components.html 它将通过prop将数据从父级传递到子级,但是那里没有重渲染逻辑。 您需要为父级设置一些状态,然后在父级更改状态下重新渲染子级。 这可能会有所帮助。 https:/
  • 使用TypeScript在React组件中的默认属性值(Default property value in React component using TypeScript)
    问题 我不知道如何使用Typescript为我的组件设置默认属性值。 这是源代码: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } 当我尝试使用这样的组件时: ReactDOM.render(<PageComponent />, document.getElementById("page")); 我收到一个错误消息,说缺少属性foo 。 我想使用默认值。 我也尝试在组件内部使用static defaultProps = ... ,但是我怀疑它没有任何效果。 src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle
  • React 路由详解
    一、SPA理解 单页面Web应用 single page web application SPA整个应用只有一个完整的页面点击页面的链接不会刷新页面,只会做页面的局部更新数据都需要通过ajax请求获取,并在前端异步展现 二、路由理解 前端路由: - 浏览器端路由,value是component,用于展示页面内容 - 注册路由:<Router path="/test" componnet={Test}> - 工作过程:当浏览器的path编程/test时,当前路由组件就会变成Test组件后段路由: - value是function,用来处理客户端提交的请求 - router.get(path,function(req,res)) - 工作过程:当node接受一个请求时,根据请求路径找到匹配的路由,调用路由中的函数来处理请求,返回相应的数据 三、安装 React Router被拆分成三个包: react-router (提供核心的路由组件与函数)react-router-dom (运行在浏览器,前端人员使用)react-router-native yarn add react-router-dom --save 四、react-router-dom 相关组件 组件作用BrowserRouter约定模式为history
  • 如何有条件地向React组件添加属性?(How do I conditionally add attributes to React components?)
    问题 如果满足特定条件,是否有办法仅将属性添加到R​​eact组件? 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于readOnly =“ false”与完全省略该属性不同,因此我看不到如何解决此问题。 下面的示例应该解释我想要的内容,但是它不起作用(解析错误:意外的标识符)。 var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false } }, componentDidMount: function () { this.setState({ isRequired: true }); }, render: function () { var isRequired = this
  • 使用React Router V4以编程方式导航(Programmatically navigate using react router V4)
    问题 我刚刚从v3到v4替换了react-router 。 但是我不确定如何以编程方式导航Component的成员函数。 即在handleClick()函数中,我想在处理一些数据后导航到/path/some/where 。 我曾经通过以下方式做到这一点: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') 但是我在v4中找不到这样的接口。 如何使用v4导航? 回答1 如果您以浏览器环境为目标,则需要使用react-router-dom软件包,而不是react-router 。 它们遵循与React相同的方法,以分离核心( react )和平台特定的代码( react-dom , react-native ),其细微差别在于您无需安装两个单独的软件包,因此环境包包含您需要的一切。 您可以通过以下方式将其添加到您的项目中: yarn add react-router-dom 或者 npm i react-router-dom 您需要做的第一件事是提供<BrowserRouter>作为应用程序中最顶层的父组件。 <BrowserRouter>使用HTML5 history API并为您管理它,因此您不必担心自己进行实例化并将其作为道具传递给<BrowserRouter
  • 如何从 TypeScript 的接口中排除键(How to exclude a key from an interface in TypeScript)
    问题 在 TypeScript 中,您可以像这样组合两种接口类型 interface Foo { var1: string } interface Bar { var2: string } type Combined = Foo & Bar 我不想组合键,而是想将键从一个接口排除到另一个接口。 无论如何,您可以在 TypeScript 中做到这一点吗? 原因是,我有一个 HOC,它管理像这样的其他包装组件的属性值 export default function valueHOC<P> ( Comp: React.ComponentClass<P> | React.StatelessComponent<P> ): React.ComponentClass<P> { return class WrappedComponent extends React.Component<P, State> { render () { return ( <Comp {...this.props} value={this.state.value} /> ) } } 有了它我可以写 const ValuedComponent = valueHOC(MyComponent) 然后 <ValuedComponent /> 但问题是,返回的组件类型也使用给定组件的 props 类型,因此 TypeScript
  • 在 React 中单击按钮时显示一个组件 [重复](Display a component on clicking a button in React [duplicate])
    问题 这个问题在这里已经有了答案: 在 React 中显示或隐藏元素(30 个回答) onClick 不呈现新的反应组件。 (5 个回答) 3年前关闭。 我是新来的反应。 如何仅在反应中单击按钮后才呈现组件? 在我点击按钮的情况下,我必须显示一个表格,该表格显示数据库中的数据。 我在下面附上了我的代码供您参考,第一个组件是按钮组件,在下面您可以找到表格的组件。 另外我想知道如何在不刷新整个页面的情况下单击按钮刷新组件。 var Button = React.createClass({ render: function () { return ( <button type="button">Display</button> ); } }); var EmployeeRow = React.createClass({ render: function () { return ( <tr> <td>{this.props.item.EmployeeID}</td> <td>{this.props.item.FirstName}</td> <td>{this.props.item.LastName}</td> <td>{this.props.item.Gender}</td> </tr> ); } }); var EmployeeTable = React.createClass({
  • 基于react的H5开发入门基础简介
    一、react是什么?React是一个 JavaScript 库 ,可用来创建用户界面的,可认为是MVC 中的V(视图)。React是 基于Component 的,即组件,React认为一切页面元素都可以抽象成组件,且大部分操作都是针对组件的。1.1 React诞生背景传统的DOM(文件对象模型)操作会对整个DOM树进行重新渲染,时间成本、复杂度高 ,很慢且容易造成卡顿使页面短暂失去响应。为解决DOM操作慢的问题,React引入虚拟DOM,比较新的与旧的虚拟DOM节点之间的差异,最后将diff反映到真实DOM,尽可能减少重绘,提高性能。1.2 React优势与特点 频繁操作DOM代价是昂贵的,React之所以快,是因为它一般不直接操作DOM。React将DOM结构存储在内存中,然后同组件render()的返回内容进行比较,计算出需要改动的地方,最后才反映到真实DOM中。React的优势、特点如下:组件可复用性和扩展性好,开发效率提高不直接操作DOM ,先在虚拟DOM中计算变化,最后将diff反应到真实的DOM中,尽可能减少重绘,提高性能。基于状态实现对DOM控制和渲染 ,是React 的一大创新,将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。1.3 虚拟DOM原理React将新的虚拟DOM(由组件的render方法返回
  • 使用Formik轻松开发更高质量的React表单(三)<Formik />解析
    提醒和建议 根据我的粗浅经验,如果您对Formik感兴趣,并且想深入学习与使用这个库,我建议您还是先对redux-form的使用逻辑与有关概念有所了解,而且理解和使用方面也变得容易得多的多。因为Formik中许多概念与形式与redux-form极其类似,但是各方面都简化了很多,因为它不再依赖于约束整个前面存储的Redux store的限制,由于整个前端使用一个store存储,所以,随着表单数量与形式变得越来越复杂,系统的属性可能会受到严重影响——这是Formik产生的主要原因,Formik干脆不使用Redux,而直接操作React组件,这就有可能使得编写表单元素虽然简单(HTML5)但比较冗长,于是Formik也引入了类似于redux-form的一些API与props等概念(但绝对有区别)。另外请注意,为了与其他流行的React文章保持一致,有些单词没有必要翻译过来,例如store, values,props,shape,errors,等等。另外,touch和touched这个词在Formik中广泛使用,意思是表单中某个字段被点击过,此时用户可能没有输入什么数据,也有可能输入了新的数据,都称为touched。因此,后面的译文中一般翻译为「动过」,个别地方翻译成「润色」,请理解其使用情形就是。 关于<Formik />组件 <Formik>是一个帮助构建表单的组件
  • 在 React JSX 中选择性渲染可选组件属性(Selectively rendering optional component properties in React JSX)
    问题 我有一个用例,我有一个 Image 组件,它有一个必需的“src”属性和一个可选的“link”属性,如下所示: var Image = React.createClass({ propTypes: { link: React.PropTypes.string, event: React.PropTypes.object, src: React.PropTypes.string.isRequired }, handleClick: function(event, link) { analytics.track(event) .then(function() { window.location = link; }); }, render: function() { return ( <img className='image' src={this.props.src} onClick={this.handleClick.bind(this, this.props.event, this.props.link)} /> ); } }); 如果我想在调用 Image 组件时有选择地包含可选道具,我该如何优雅地做到这一点? 我最初的想法是做一个这样的三元表达式,除了这不是有效的 JSX: render: function() { return ( <Image src={this
  • 如何通过打字稿在 Formik 中添加强类型字段?(How to add strongly typed field in Formik by typescript?)
    问题 我试图通过打字稿在 Formik 反应库中添加强类型,但我没有这样做。 当然,我已经使用了这个链接,但我无法解决我的问题。 https://jaredpalmer.com/formik/docs/guides/typescript 我从这部分代码(})(ActivityForm);)中得到了这个错误: '(props: IProps) => Element' 类型的参数不可分配给'CompositeComponent & FormikState & FormikHelpers & FormikHandlers & FormikComputedProps & FormikRegistration & { ...; }>'。 类型 '(props: IProps) => Element' 不可分配给类型 'FunctionComponent & FormikState & FormikHelpers & FormikHandlers & FormikComputedProps & FormikRegistration & { ...; }>'。 参数 'props' 和 'props' 的类型不兼容。 “FormikSharedConfig<{}> & FormikState & FormikHelpers & FormikHandlers &