Reactjs 如何向TSX模板添加没有数据的无值自定义属性-*？

我正在使用Typescript处理React组件。目前我有以下几点

const NameFormatter = React.createClass({
    render() {
        return (
            <div>
                <div className="dataset-name">
                    {this.props.value}
                </div>
            </div>
        );
    }
});

const NameFormatter=React.createClass({
render（）{
返回(
{this.props.value}
);
}
});

这是一个有效的方法和输出

<div>
  <div className="dataset-name"> My Value </div>
</div>

我的价值

但我需要的是

<div fxLayout="row" fxFlex>
  <div className="dataset-name"> My Value </div>
</div>

我的价值

所以我试着

const NameFormatter = React.createClass({
    render() {
        return (
            <div fxFlex fxLayout="row">
                <div className="dataset-name">
                    {this.props.value}
                </div>
            </div>
        );
    }
});

const NameFormatter=React.createClass({
render（）{
返回(
{this.props.value}
);
}
});

但这不会编译并说

类型“HTMLProps”上不存在属性“fxFlex”。 类型“HTMLProps”上不存在属性“fxLayout”

如何添加这些属性

更新

这很有效

问题是，由于渲染后angular会使用此功能，angular要求名称为fxFlex，因此它似乎没有帮助

同样，这种方法似乎有效，但无法正确设置值

设d=`
{this.props.value}
`;
返回(
);

但这是一种输出

<div class="dataset-name-wrapper">
  <div classname="dataset-name" fxflex>
    {this.props.value}
  </div>
</div>

{this.props.value}

这似乎是React中的一个问题，并为此打开了大门。同时，由于我使用TS，我可以像这样使用ES6表达式插值

const NameFormatter=React.createClass({
render（）{
设d=`
${this.props.value}
`;
返回(
);
}
});

---

然而，这是非常黑客和容易出现XSS问题。所以我不会接受这个答案，而是会等到问题得到解决。

我不确定你能不能：你可以使用属性扩展避免编译错误，

但这不能防止运行时出现React-proptype错误。你们看起来是对的，这实际上看起来像是重复的，在我发布后我发现了@Aaron我试过这个

，但没有骰子。我还尝试了一次不掷骰子。我想这不是真的复制品，因为这并不是说没有价值。这个问题还提到，它不适用于Es6，也不适用于没有

数据的任何东西-

语法应该是

，但同样，这并没有真正的帮助，因为如果React不识别它，它不会将它传递给DOM。您可以使用

数据-*

前缀吗？您可以使用web组件吗？