如何有条件地向React组件添加属性?

2020/09/23 16:01 · javascript ·  · 0评论

如果满足特定条件,是否有办法仅将属性添加到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.state.isRequired;

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

显然,对于某些属性,如果您传递给它的值不真实,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文件的30167

juandemarco的答案通常是正确的,但这是另一种选择。

用自己喜欢的方式构建对象:

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

if (condition)
  inputProps.disabled = true;

以传播方式渲染,也可以选择通过其他道具。

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

下面是使用的示例自举Button经由阵营的自举(版本0.32.4):

var condition = true;

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

根据条件,将返回{bsStyle: 'success'}{}然后,散布运算符将散布返回的对象的属性到Button组件。在虚假情况下,由于返回的对象上没有属性,因此不会将任何内容传递给组件。


另一种基于安迪·波希尔(Andy Polhill)评论的方法

var condition = true;

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

唯一的小差别是在第二个示例中,内部组件<Button/>props对象将具有bsStyle一个值为的undefined

这是另一种选择。

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 } ) } />
);

这是我的一种方法。

有条件的

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

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

没有条件

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

假设我们想在条件为真的情况下添加自定义属性(使用aria- *或data- *):

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

假设我们想在条件为true的情况下添加样式属性:

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

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

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

如果使用ECMAScript 6,则可以这样编写。

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

这应该起作用,因为在Ajax调用之后您的状态将发生变化,并且父组件将重新呈现。

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

在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>

例如,将属性样式用于自定义容器

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

  return (
    <Container {...otherProps} >

考虑一下JSX In Depth,您可以通过以下方式解决您的问题:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);
本文地址:http://javascript.askforanswer.com/ruheyoutiaojiandixiangreactzujiantianjiashuxing.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!