如何有条件地向React组件添加属性?
如果满足特定条件,是否有办法仅将属性添加到React组件?
我应该在渲染后基于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.state.isRequired;return (<MyOwnInput name="test" {isRequired ? "required" : ""} />);}
});
#1楼
这应该起作用,因为在ajax调用之后您的状态将改变,并且父组件将重新呈现。
render : function () {var item;if (this.state.isRequired) {item = <MyOwnInput attribute={'whatever'} />} else {item = <MyOwnInput />}return (<div>{item}</div> );
}
#2楼
显然,对于某些属性,如果您传递给它的值不真实,React足够聪明,可以忽略该属性。 例如:
var InputComponent = React.createClass({render: function() {var required = true;var disabled = false;return (<input type="text" disabled={disabled} required={required} />);}
});
将导致:
<input type="text" required>
更新:如果有人对如何/为什么发生这种情况感到好奇,可以在ReactDOM的源代码中找到详细信息,特别是在DOMProperty.js文件的第30和167行。
#3楼
考虑这篇JSX Depth文章,您可以通过这种方式解决您的问题
if (isRequired) {return (<MyOwnInput name="test" required='required' />);
}
return (<MyOwnInput name="test" />
);
#4楼
只是丢了另一个选择,但是@juandemarco的答案通常是正确的。
用自己喜欢的方式构建对象:
var inputProps = {value: 'foo',onChange: this.handleChange
};if (condition) inputProps.disabled = true;
以传播方式渲染,也可以选择通过其他道具。
<input value="this is overridden by inputProps" {...inputProps} onChange={overridesInputProps}/>
#5楼
这是通过React-Bootstrap (版本:0.32.4)使用Bootstrap的Button
的示例。
var condition = true;return (<Button {...(condition ? {bsStyle: 'success'} : {})} />
);
根据条件,将返回{bsStyle: 'success'}
或{}
。 然后,散布运算符会将散布的返回对象的属性散布到Button
组件。 在错误的情况下,由于返回的对象上不存在任何属性,因此不会将任何内容传递给组件。
基于以下@Andy Polhill的评论的替代方法:
var condition = true;return (<Button bsStyle={condition ? 'success' : undefined} />
);
唯一的小差别是,在第二个示例中,内部组件<Button/>
的props
对象将具有值为undefined
的键bsStyle
。
#6楼
您可以使用同一快捷方式,该快捷方式用于添加/删除组件(的一部分)( {isVisible && <SomeComponent />}
)。
class MyComponent extends React.Component {render() {return (<div someAttribute={someCondition && someValue} />);}
}
#7楼
晚会了。 这是另一种选择。
var condition = true;var props = {value: 'foo',...( condition && { disabled: true } )
};var component = <div { ...props } />;
或其内联版本
var condition = true;var component = (<divvalue="foo"{ ...( condition && { disabled: true } ) } />
);
#8楼
晚会了。
假设如果条件为真,我们想添加一个自定义属性(使用aria- *或data- *):
{...this.props.isTrue && {'aria-name' : 'something here'}}
假设我们想在条件为true的情况下添加样式属性:
{...this.props.isTrue && {style : {color: 'red'}}}
#9楼
如果使用es6,则可以这样编写。
// first, create a wrap object.
const wrap = {[variableName]: true
}
// then, use it
<SomeComponent {...{wrap}} />
#10楼
在React中,您可以有条件地渲染Components以及它们的属性,例如props,className,id等。
在React中,最好使用“三元运算符”,它可以帮助您有条件地渲染Components。
示例还显示了如何有条件地渲染Component及其样式属性
这是一个简单的例子:
class App extends React.Component { state = { isTrue: true }; render() { return ( <div> {this.state.isTrue ? ( <button style={{ color: this.state.isTrue ? "red" : "blue" }}> I am rendered if TRUE </button> ) : ( <button>I am rendered if FALSE</button> )} </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
#11楼
这是我的一种方法。
有条件的 :
<Label{...{text: label,type,...(tooltip && { tooltip }),isRequired: required}}
/>
我仍然更喜欢使用常规的方式传递道具,因为(在我看来)在没有任何条件的情况下它更具可读性。
没有条件的 :
<Label text={label} type={type} tooltip={tooltip} isRequired={required} />
如何有条件地向React组件添加属性?相关推荐
- 使用TypeScript映射和条件类型使React组件更出色
by Deepu K Sasidharan 通过Deepu K Sasidharan 使用TypeScript映射和条件类型使React组件更出色 (Make your React component ...
- react 组件添加样式_如何通过4个简单的步骤将CSS模块样式表添加到React组件
react 组件添加样式 Let's say you'd like to add a CSS Modules Stylesheet to your project. You can find Crea ...
- react 组件的属性
react组件的属性值如果不是字符串的话,要用大括号括起来.比如 <InputText name='sisi' age={6} school='hust' />, 如果写作age=6的话, ...
- react 组件引用组件_动画化React组件
react 组件引用组件 So, you want to take your React components to the next level? Implementing animations c ...
- react 动态添加组件属性_这么高质量React面试题(含答案),看到就是赚到了!...
前言 本文篇幅较长,全是干货,建议亲们可以先收藏慢慢看哦 写文不易,欢迎大家一起交流,喜欢文章记得关注我点个赞哟,感谢支持! Q1 :什么是虚拟DOM? 难度::star: 虚拟DOM(VDOM)它是 ...
- react 给一个引用的组件添加新属性_高阶组件在React中的应用
高阶组件的定义 接受React组件作为输入,输出一个新的React组件. 概念源自于高阶函数,将函数作为参数,或者输出一个函数,如map,reduce,sort. 用haskell的函数签名来表示: ...
- 深入了解React组件重新渲染的条件和生命周期
React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- react 组件构建_使用React Spring和Tinycolor构建色彩丰富的弹性组件
react 组件构建 Recently, I decided to build a web application to allow designers and developers to gener ...
最新文章
- Yii2 事件学习笔记
- secureCRT 实现windows和linux文件互传
- 视频直播技术详解:直播的推流调度
- arduinowin7_Win7系统下Arduino驱动安装失败的解决方法
- #{} vs ${}
- 常用JavaScript函数 16 - 30(自我总结)
- 小熊派鸿蒙开发版,小熊派IoT开发板系列教程合集
- 如何监控微信小程序HTTP请求错误
- 远程桌面未知的用户名_远程桌面连接 提示用户名密码错误的解决办法
- MIMO技术中的各种增益分析
- CRISPR基因编辑技术获诺奖,人类的福音还是灾难?
- nuxt+tsx项目 class报错
- 职业学校计算机专业好吗,计算机专业就业前景好不
- 函数指针数组的一些用法
- 网易5天python编程课_网易云课堂上自学编程?
- MacBook更新系统空间不足/无限重启/无法退出更新程序
- Android手机直播(一)总览
- 润盈益通保本型理财产品优势
- android 按钮在键盘上,Android使用键盘上的完成按钮点击按钮
- 2021年低压电工考试题及低压电工考试报名
热门文章
- 自己动手写C语言编译器(2)
- ViewPager中Fragment的生命周期和FragmentPageAdapter与FragmentStatePageAdapter对其的影响
- Android10.0 日志系统分析(三)-logd、logcat读写日志源码分析-[Android取经之路]
- SSL--用Tomcat服务器配置https双向认证过程实战
- Flutter开发之Input-TextField-文本输入框(45)
- disruptor框架为什么不流行_Java并发编程框架Disruptor
- thinkphp概述
- GeoIP的使用-C语言版
- Visual Studio 使用 Web Deploy 发布远程站点
- Linux服务器出现java.net.UnknownHostException 异常处理