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

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

显然，对于某些属性，React足够智能，如果传递给它的值不是真值，它会省略该属性。例如:

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

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

会导致:

<input type="text" required>

更新:如果有人好奇这种情况是如何发生的，你可以在ReactDOM的源代码中找到详细信息，特别是在DOMProperty.js文件的第30行和167行。

考虑到JSX深度文章，你可以这样解决你的问题:

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

胡德马科的答案通常是正确的，但这里有另一种选择。

创建一个你喜欢的对象:

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

if (condition) {
  inputProps.disabled = true;
}

渲染与蔓延，可选的传递其他道具也。

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

下面是一个通过React-Bootstrap(0.32.4版本)使用Bootstrap按钮的例子:

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

根据条件，将返回{bsStyle: 'success'}或{}。然后，扩展操作符将返回对象的属性扩展到Button组件。在falsy情况下，由于返回的对象上不存在任何属性，因此不会向组件传递任何内容。

另一种基于Andy Polhill评论的方法是:

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

唯一的小区别是，在第二个例子中，内部组件<Button/>的props对象将有一个值为undefined的键bsStyle。

您可以使用相同的快捷方式，用于添加/删除组件({isVisible && <SomeComponent />})的(部分)。

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

这里有一个替代方案。

var condition = true;

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

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

或者内联版本

var condition = true;

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

假设我们想要在条件为真时添加一个自定义属性(使用aria-*或data-*):

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

假设我们想在条件为真时添加一个style属性:

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

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

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

在React中，你可以有条件地呈现组件，还有它们的属性，比如props、className、id等等。

在React中，使用三元运算符是一个很好的实践，它可以帮助你有条件地呈现组件。

一个示例还展示了如何有条件地呈现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>

我有个办法。

带有条件句:

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

我仍然喜欢使用常规的传递道具的方式，因为在没有任何条件的情况下，它更具可读性(在我看来)。

不带条件句:

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

例如，为自定义容器使用属性样式

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

  return (
    <Container {...otherProps} >

在我看来，管理多个条件道具的最佳方法是@brigand中的道具对象方法。但是可以对其进行改进，以避免为每个条件道具添加一个if块。

ifVal helper

重命名为你喜欢的(iv, condVal, cv， _，…)

你可以定义一个helper函数，在满足条件时返回一个值或另一个值:

// components-helpers.js
export const ifVal = (cond, trueValue=true, falseValue=null) => {
  return cond ? trueValue : falseValue
}

如果cond为真(或真)，则返回trueValue -或真。 如果cond为false(或falsy)，则返回false value -或null。

这些默认值(true和null)通常是允许道具传递或不传递给React组件的正确值。你可以把这个函数看作是一个“改进的React三元运算符”。如果您需要对返回值有更多的控制，请改进它。

让我们用很多道具来使用它。

构建(复杂的)道具对象

// your-code.js
import { ifVal } from './components-helpers.js'

// BE SURE to replace all true/false with a real condition in you code
// this is just an example

const inputProps = {
  value: 'foo',
  enabled: ifVal(true), // true
  noProp: ifVal(false), // null - ignored by React
  aProp: ifVal(true, 'my value'), // 'my value'
  bProp: ifVal(false, 'the true text', 'the false text') // 'my false value',
  onAction: ifVal(isGuest, handleGuest, handleUser) // it depends on isGuest value
};

 <MyComponent {...inputProps} />

这种方法类似于使用classnames实用程序有条件地管理类的流行方法，但适用于props。

为什么要使用这种方法

您将拥有一个干净且可读的语法，即使有许多条件道具:每个新道具只需在对象声明中添加一行代码。

通过这种方式，您可以替换重复操作符的语法噪声(…， &&， ?:，…)，当你用一个简单的函数调用有很多道具时，这可能是非常烦人的。

作为开发人员，我们的首要任务是编写最明显的代码来解决问题。 太多时候，我们只是为了自我而解决问题，在不必要的地方增加了复杂性。 我们的代码应该简单明了，无论是对今天的我们，还是对明天的我们，还是对我们的伴侣。

我们能做某事并不意味着我们就应该做

我希望这么晚的回复能有所帮助。

我认为这可能对那些希望attribute的值是一个函数的人有用:

import { RNCamera } from 'react-native-camera';
[...]

export default class MyView extends React.Component {

    _myFunction = (myObject) => {
        console.log(myObject.type); //
    }

    render() {

        var scannerProps = Platform.OS === 'ios' ? 
        {
            onBarCodeRead : this._myFunction
        } 
        : 
        { 
            // here you can add attribute(s) for other platforms
        }

        return (
            // it is just a part of code for MyView's layout
            <RNCamera 
                ref={ref => { this.camera = ref; }}
                style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', }}
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.on}
                {...scannerProps}
            />
        );
    }
}

使用undefined适用于大多数属性:

const name = "someName";

return (
    <input name={name ? name : undefined} />
);

在React中，我们将值作为Props从父组件传递给子组件。如果值为false，则不会将其作为道具传递。在某些情况下，我们也可以使用三元(条件运算符)。

<input checked={true} type="checkbox"  />

对于React[1]列出的一些布尔属性:

<input disabled={disabled} />

// renders either `<input>` or `<input disabled>` 

其他属性:

<div aria-selected= {selected ? "" : undefined} />

// renders either `<div aria-selected></div>` or `<div></div>`

[1]布尔属性列表:https://github.com/facebook/react/blob/3f9480f0f5ceb5a32a3751066f0b8e9eae5f1b10/packages/react-dom/src/shared/DOMProperty.js#L318-L345

以一种简单的方式

const InputText= ({required = false , disabled = false, ...props}) => 
         (<input type="text" disabled={disabled} required={required} {...props} />);

像这样使用它

<InputText required disabled/>

在react函数组件中，你可以尝试这样做来省略不必要的标签属性。

<div className="something" ref={someCondition ? dummyRef : null} />

这适用于我，如果我需要省略标签，如ref, class等。但我不知道这是否适用于每个标签属性

<Button {...(isWeb3Enabled ? {} : { isExternal: true })}>
    Metamask
</Button>

你可以在你的渲染方法(如果使用类)或返回语句(如果使用函数组件)中执行以下操作:

 <MyComponent required={isRequired ? 'true' : undefined} />

在这种情况下，如果isRequired为undefined、false或null(这与添加属性但将其设置为'false'不同)，则属性将不会被添加。还要注意，我使用字符串而不是布尔值，以避免来自react的警告消息(在非布尔属性上接收布尔值)。

此外，还可以将其他值设置为布尔值

const MyComponent = function() {
    const Required = "yes";

    return (
         <input
                      required={Required === "yes"}
                      type="text"
                      key={qs.Name}
                      name="DefaultValue"
                      label={qs.QuestionTitle}
                      onChange={(event) => handleInputChange(index, event)}
                      placeholder={qs.QuestionTitle}
                    />
    );
}

如果是有限数量的属性，这将做

    function MyInput({isRequired}) {
        if (isRequired) {
            return <input classname="foo" isRequired={isRequired} />
        }
        return <input classname="foo" />
    }

如果您有大量的属性，那么很难为每个属性编写If else条件并相应地返回。为此，您可以将这些属性推入到对象中，并在返回元素中使用展开操作符。

    function MyInput({ prop1, prop2, ...propN }) {
        const props = {};
        if (prop1) props.prop1 = prop1;
        .
        .
        .
        if (propN) props.propN = propN;
        return <input classname="foo" {...props} />
    }

当您不需要该属性时，必须将其值设置为未定义 例子:

<a data-tooltip={sidebarCollapsed?'Show details':undefined}></a>