Question

希望我的问题很明确，我主要是寻找一种方法来动态地将属性附加到JSX输入。

<input type="text" {variableAttribute}={anotherVariable} />

这样的事情是否可能不会覆盖JSX编译为常规HTML的方式？

Answer 1

您可以使用computed property name初始化对象，然后使用JSX Spread Attributes将其转换为属性：

const DemoComponent = ({ variablePropName, variablePropValue }) => { 
    const variableAttribute = { [variablePropName]: variablePropValue };
    return (
        <input type="text" { ...variableAttribute } />
    );
};

Answer 2

你不能按照自己的方式去做。您需要将属性定义为对象，并将其作为传播属性传递。

您传入的对象的属性将复制到组件的道具上。

您可以多次使用此功能，也可以将其与其他属性结合使用。

＆＃13;

var Hello = React.createClass({
      render: function() {
        
        var opt = {}
        opt['placeholder'] = "enter text here";
        return (<div>
        Hello {this.props.name}
        <div>
        	<input type="text" {...opt}/>
        </div></div>);
      }
    });
    
    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

＆＃13;

DOCS

在JSX中拥有变量属性的最佳方法是什么？

2 个答案: