如何有条件地向React组件添加属性？-白红宇

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

阅读量：2290 次

发布时间：2019-05-09

本文共 2882 字，大约阅读时间需要 9 分钟。

如果满足特定条件，是否有办法仅将属性添加到React组件？

我应该在渲染后基于ajax调用将required和readOnly属性添加到表单元素中，但是由于readOnly =“ false”与完全省略该属性不同，因此我看不到如何解决此问题。

下面的示例应解释我想要的内容，但无法正常工作（解析错误：意外的标识符）。

var React = require('React');var MyOwnInput = React.createClass({    render: function () {        return (            
                   
                
   
        );    }});module.exports = React.createClass({    getInitialState: function () {        return {            isRequired: false        }    },    componentDidMount: function () {        this.setState({            isRequired: true        });    },    render: function () {        var isRequired = this.state.isRequired;        return (            
           );    }});

#1楼

这应该起作用，因为在ajax调用之后您的状态将改变，并且父组件将重新呈现。

render : function () {    var item;    if (this.state.isRequired) {        item = 
       } else {        item = 
       }    return (        
   
                {item}        
   
        );}

#2楼

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

var InputComponent = React.createClass({    render: function() {        var required = true;        var disabled = false;        return (                    );    }});

将导致：

更新：如果有人对如何/为什么发生这种情况感到好奇，可以在ReactDOM的源代码中找到详细信息，特别是在文件的第和行。

#3楼

考虑这篇您可以通过这种方式解决您的问题

if (isRequired) {  return (    
     );}return (    
   );

#4楼

只是丢了另一个选择，但是@juandemarco的答案通常是正确的。

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

var inputProps = {  value: 'foo',  onChange: this.handleChange};if (condition) inputProps.disabled = true;

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

#5楼

这是通过（版本：0.32.4）使用的的示例。

var condition = true;return (  );

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

基于以下@Andy Polhill的评论的替代方法：

var condition = true;return (  );

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

#6楼

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

class MyComponent extends React.Component {  render() {    return (      
   
    );  }}

#7楼

晚会了。这是另一种选择。

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

或其内联版本

var condition = true;var component = (  
   
);

#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

#10楼

在React中，您可以有条件地渲染Components以及它们的属性，例如props，className，id等。

在React中，最好使用“三元运算符”，它可以帮助您有条件地渲染Components。

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

这是一个简单的例子：

class App extends React.Component { state = { isTrue: true }; render() { return ( 
     
       {this.state.isTrue ? ( 
       ) : ( 
       )} 
     
 ); } } ReactDOM.render(
     , document.getElementById("root"));

#11楼

这是我的一种方法。

有条件的 ：

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

没有条件的 ：

转载地址：http://fwcnb.baihongyu.com/

你可能感兴趣的文章