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

Question

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

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

这样的事情可能没有覆盖JSX编译成常规HTML的方式吗？

Answer 1

您可以使用计算属性名称初始化对象,然后使用JSX Spread Attributes将其转换为属性:

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