Question

我已根据documentation向我的React组件添加了if-else元素;但是，由于包含React组件与<></>和{}之间的语法差异，我不确定如何进一步配置组件。

这是我所拥有的缩减版本（用TypeScript编写）：

public render() {
    const mediaElement: HTMLMediaElement = this.getMediaElement();
    return { mediaElement };
}

以下getMediaElement()缩减：

private getMediaElement() {
    //... video can also be returned
    return document.createElement("audio");
    //...
}

从这里开始，最好是内联，我希望能够添加类信息等，类似于（在React中也可以）：

<li className="media-file-title">

如何使用上述语法访问元素的属性？最终，我需要指定一个参考。任何文件都会很棒！

只能通过对象属性来实现，即：

mediaElement.src = ""

Answer 1

我认为您最好的方法是渲染React元素而不是纯HTML元素。请参阅React.js write components directly in HTML。

您可以重写代码，如：

private getMediaElement(src) {
    //... video can also be returned
    return (<audio src={ src } />);
    //...
}

public render() {
    const mediaElement = this.getMediaElement(this.props.src);
    return (mediaElement);
}

然后您可以通过组件的道具访问该类的道具。

配置If-Else组件，React

1 个答案: