Javascript 如何有条件地添加属性以反应组件？

如果满足某个条件，是否有方法仅向React组件添加属性

我应该在渲染后基于Ajax调用添加必需的和只读的属性以形成元素，但我看不出如何解决这个问题，因为

readOnly=“false”

与完全忽略属性不同

下面的例子应该解释我想要什么，但它不起作用

（分析错误：意外标识符）

var React=require（'React'）；
var MyOwnInput=React.createClass({
渲染：函数（）{
返回(
);
}
});
module.exports=React.createClass({
getInitialState:函数（）{
返回{
isRequired:错误
}
},
componentDidMount:函数（）{
这是我的国家({
isRequired:是的
});
},
渲染：函数（）{
var isRequired=this.state.isRequired；
返回(
);
}
});

这应该是可行的，因为在Ajax调用之后，您的状态将发生变化，并且父组件将重新呈现

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

render:function（）{
var项目；
如果（此.state.isRequired）{
项目=
}否则{
项目=
}
返回(
{item}
);
}

这应该是可行的，因为在Ajax调用之后，您的状态将发生变化，并且父组件将重新呈现

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

render:function（）{
var项目；
如果（此.state.isRequired）{
项目=
}否则{
项目=
}
返回(
{item}
);
}

显然，对于某些属性，如果传递给它的值不真实，React足够智能，可以忽略该属性。例如：

const InputComponent = function() {
    const required = true;
    const disabled = false;

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

const InputComponent=function（）{
const required=true；
const disabled=false；
返回(
);
}

将导致：

<input type="text" required>

---

更新：如果有人想知道这是怎么发生的/为什么发生的，您可以在ReactDOM的源代码中找到详细信息，特别是在文件的行和行中。

显然，对于某些属性，如果传递给它的值不真实，React足够智能，可以忽略该属性。例如：

const InputComponent = function() {
    const required = true;
    const disabled = false;

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

const InputComponent=function（）{
const required=true；
const disabled=false；
返回(
);
}

将导致：

<input type="text" required>

更新：如果有人想知道这是如何发生的/为什么发生的，您可以在ReactDOM的源代码中找到详细信息，特别是在文件的第行和第行。

考虑到这篇文章，您可以通过以下方式解决问题：

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);

if（需要时）{
返回(
);
}
返回(
);

考虑到这篇文章，您可以通过以下方式解决您的问题：

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);

if（需要时）{
返回(
);
}
返回(
);

通常是正确的，但这里有另一个选项

按照您喜欢的方式构建对象：

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

if (condition)
  inputProps.disabled = true;

使用扩展渲染，也可以选择传递其他道具

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

通常是正确的，但这里有另一个选项

按照您喜欢的方式构建对象：

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

if (condition)
  inputProps.disabled = true;

使用扩展渲染，也可以选择传递其他道具

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

---

以下是使用的via（版本0.32.4）的示例：

---

唯一的小区别是，在第二个示例中，内部组件

的

道具

对象将有一个键

bsStyle

，其值为

undefined

，下面是使用“s via”（版本0.32.4）的示例：

---

唯一的小区别是，在第二个示例中，内部组件

的

道具

对象将有一个键

bsStyle

，其值为

undefined

，您可以使用相同的快捷方式，该快捷方式用于添加/删除（部分）组件（

{isVisible&}

）

类MyComponent扩展了React.Component{ render（）{ 返回( ); } }

---

您可以使用相同的快捷方式，该快捷方式用于添加/删除组件（

{isVisible&}

）

类MyComponent扩展了React.Component{ render（）{ 返回( ); } }

---

这里有一个替代方案

var condition = true;

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

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

var条件=true；
变量props={
值：“foo”，
…（条件&&{disabled:true}）
};
var分量=；

或者它的内联版本

var condition = true;

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

var条件=true；
变量分量=(
);

这里有一个替代方案

var condition = true;

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

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

var条件=true；
变量props={
值：“foo”，
…（条件&&{disabled:true}）
};
var分量=；

或者它的内联版本

var condition = true;

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

var条件=true；
变量分量=(
);

假设我们想要添加一个自定义属性（使用aria-*或data-*），如果条件为true：

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

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

---

假设如果条件为true，则要添加样式属性：

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

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

---

假设我们想要添加一个自定义属性（使用aria-*或data-*），如果条件为true：

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

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

---

假设如果条件为true，则要添加样式属性：

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

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

---

如果您使用ECMAScript 6，您可以这样简单地编写

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

//首先，创建一个包裹对象。
常量换行={
[变量名称]：true
}
//然后，使用它

如果使用ECMAScript 6，只需这样编写即可

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

//首先，创建一个包裹对象。
常量换行={
[变量名称]：true
}
//然后，使用它

在React中，您可以有条件地呈现组件，但也可以呈现组件的属性，如道具、类名、id等

在React中，使用可以帮助您有条件地渲染组件的是非常好的做法

示例还显示了如何有条件地渲染组件及其样式属性

下面是一个简单的例子：

类应用程序扩展了React.Component{
状态={
伊斯特鲁：是的
};
render（）{
返回(
{这个州是真的吗(
如果是真的，我就被判有罪
)