配置 If-Else 组件，React答案

【问题标题】：Configure If-Else Component, React配置 If-Else 组件，React
【发布时间】：2016-09-07 00:53:00
【问题描述】：

我根据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 = ""

【问题讨论】：

你能粘贴你的getMediaElement()方法实现吗？我不明白getMediaElement() 是否返回一个 React 类或一个普通的 html 元素？
@dinchev 只是一个普通的 HTML 元素。已发布。

标签： reactjs typescript

【解决方案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);
}

然后你可以稍后通过组件的 props 访问类的 props。

【讨论】：