Question

我正在使用Typescript处理React组件。目前我有以下内容......

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

这可以工作和输出

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

但这不会编译并说......

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

如何添加这些属性？

更新

这有效......

<div {...{"data-fxFlex":""}}>

问题是因为渲染后角度消耗了这个角度，角度要求名称为fxFlex，它似乎没什么帮助。

此类似乎有效，但没有正确设置值......

let d = ` <div className="dataset-name" fxFlex=""> {this.props.value} </div> `; return ( <div className="dataset-name-wrapper" dangerouslySetInnerHTML={{__html: d}} > </div> );

但这会输出

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

Answer 1

这似乎是React中的一个问题，there is a ticket为它打开了。在我使用TS的同时，我可以像这样使用ES6表达式插值...

const NameFormatter = React.createClass({
    render() {
        let d = `
                <div className="dataset-wrapper" fxFlex="">
                  <div>
                     ${this.props.value}
                  </div>
                </div>
        `;
        return (
            <div className="react-wrapper" dangerouslySetInnerHTML={{__html: d}} >

            </div>
        );
    }
});

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

如何在没有data- *的情况下将无值的自定义属性添加到TSX模板？

1 个答案: