比较来自世界各地的卖家的域名和 IT 服务价格

如何传统地将属性添加到组件 React?

有没有办法将属性添加到组件 React 只有在进行某种情况时才?

我必须添加强制性属性和属性 readOnly 基于呼叫生成项目 Ajax 渲染后,但我没有看到如何解决它,因为 readOnly="false"- 这与完全省略该属性的东西并不相同。

下面的例子应该解释我想要的东西,但它不起作用 /语法分析错误:意外标识符/.


var React = require/'React'/;

var MyOwnInput = React.createClass/{
render: function // {
return /
<div>
<input name="{this.props.name}/" onchange="{this.changeValue}" type="text" value="{this.getValue//}"/>
</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 ""}="" "required"="" :="" ?="" name="test" {isrequired=""></myowninput>
/;
}
}/;
已邀请:

君笑尘

赞同来自:

显然,对于某些属性 React 如果您传达给它的值不是真的,则智能足以省略该属性。 例如:


var InputComponent = React.createClass/{
render: function// {
var required = true;
var disabled = false;

return /
<input disabled="{disabled}" required="{required}" type="text">
/;
}
}/;


会导致以下事实:


<input required="" type="text"/>


更新:

如果有人想知道如何/为什么会发生这种情况,您可以在源代码中找到详细信息。 ReactDOM, 特别是在线
https://github.com/facebook/re ... 23L30

https://github.com/facebook/re ... 3L167
文件 DOMProperty.js.
</input>

小明明

赞同来自:

https://coderoad.ru/31163693/
Huandemarko通常是真的,但还有另一种选择。

根据您的喜好构建对象:


var inputProps = {
value: 'foo',
onChange: this.handleChange
};

if /condition/
inputProps.disabled = true;


渲染与传播,可选择传输其他细节。


<input onchange="{overridesInputProps}" value="this is overridden by inputProps" {...inputprops}="">


</input>

三叔

赞同来自:

这是一个使用的例子

http://getbootstrap.com/
's
https://react-bootstrap.github ... ttons
穿过

http://react-bootstrap.github.io
/版本 0.32.4/:


var condition = true;

return /
<button 'success'}="" :="" ?="" condition="" {...="" {bsstyle:="" {}="" }=""></button>
/;


根据条件,它也会返回
{bsStyle: 'success'}

, 或者
{}

. 然后是运营商 spread 分发组件上返回对象的属性
Button

. 在假情况下,因为没有返回对象的属性,因此不会传输组件。

基于WAL的替代方法

:


var condition = true;

return /
<button 'success'="" :="" ?="" bsstyle="{condition" undefined}=""></button>
/;


唯一的差异是在第二个示例内部组件中
<button></button>

's _35 object 将有一个关键
bsStyle

有意义
undefined

.

三叔

赞同来自:

在这里你有另一种选择。


var condition = true;

var props = {
value: 'foo',
.../ condition && { disabled: true } /
};

var component = <div ...props="" {="" }=""></div>;


或其内置版本


var condition = true;

var component = /
<div &&="" ...="" condition="" disabled:="" true="" value="foo" {="" }=""></div>
/;

帅驴

赞同来自:

这就是我的方式。

有条件的

指定 :


<label &&="" ,="" ...="" isrequired:="" label,="" required="" text:="" tooltip="" type,="" {="" {...{="" }="" }}=""></label>


我仍然喜欢使用通常的方式转移道具,因为它更可读 /在我看来/ 在没有任何条件的名称。

没有条件

名称 :


<label isrequired="{required}" text="{label}" tooltip="{tooltip}" type="{type}"></label>

三叔

赞同来自:

假设我们要添加自定义属性。 /使用 aria-* 或者 data-*/, 如果条件真的是:


{...this.props.isTrue && {'aria-name' : 'something here'}}


假设我们想要添加样式属性,如果条件是真实的:


{...this.props.isTrue && {style : {color: 'red'}}}

江南孤鹜

赞同来自:

您可以使用用于添加的相同标签。/移动 /部分/ 成分 /
{isVisible && <somecomponent></somecomponent>}

/.


class MyComponent extends React.Component {
render// {
return /
<div &&="" someattribute="{someCondition" somevalue}=""></div>
/;
}
}

龙天

赞同来自:

如果您正在使用 ECMAScript 6,, 你可以简单地写作。


// First, create a wrap object.
const wrap = {
[variableName]: true
}
// Then, use it
<somecomponent {...{wrap}}=""></somecomponent>

莫问

赞同来自:

它应该工作,因为您的州在呼叫后将改变 Ajax, 父组件将重新可视化。


render : function // {
var item;
if /this.state.isRequired/ {
item = <myowninput attribute="{'whatever'}"></myowninput>
} else {
item = <myowninput></myowninput>
}
return /
<div>
{item}
</div>
/;
}

莫问

赞同来自:

在 React 您可以与可视化组件相关联,也可以涉及它们的属性,例如 props, className, id 以及更多。

在 React 非常好的用途
https://en.wikipedia.org/wiki/ ... ience
, 这可以帮助您传统地可视化组件。

一个例子还示出了如何传统地可视化组件及其样式属性。

这是一个简单的例子:


class App extends React.Component {
state = {
isTrue: true
};

render// {
return /
<div>
{this.state.isTrue ? /
<button "blue"="" "red"="" :="" ?="" color:="" style="{{" this.state.istrue="" }}="">
I am rendered if TRUE
</button>
/ : /
<button>I am rendered if FALSE</button>
/}
</div>
/;
}
}

ReactDOM.render/<app></app>, document.getElementById/"root"//;



<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]
<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]
<div id="root"></div>

卫东

赞同来自:

考虑帖子
https://facebook.github.io/rea ... .html
灵魂 , 您可以以这种方式解决您的问题:


if /isRequired/ {
return /
<myowninput name="test" required="required"></myowninput>
/;
}
return /
<myowninput name="test"></myowninput>
/;

君笑尘

赞同来自:

例如,使用自定义容器的属性样式


const DriverSelector = props => {
const Container = props.container;
const otherProps = {
.../ props.containerStyles && { style: props.containerStyles } /
};

return /
<container {...otherprops}="">


</container>

要回复问题请先登录注册