时间戳

首页 > 解决方案 > 在 React 中返回 html

javascript - 在 React 中返回 html

问题描述

我有以下代码要作为 HTML 输出返回。

render () {
    var ret = "";
    var x = 0;
    var name = val + "[]";
    var v = this.state.course[val];
    
    for (x = 0; x < v.length; x++) {
        var label = val + x;
        var vv = this.state.course[val][x];
        input = <input type="text" name={name} value={vv} onChange={(event) => {
            var newCourse = {...this.state.course};
            newCourse[val][x] = event.target.value;
            this.setState({course: newCourse})
        }} key={val}/>;
    
        ret += <div>
            <label>{label}</label><br/><br/>
            {input}
        </div>;
    }
    ret += <button onClick={this.addInput.bind(this, val)} />
    ret += "</div>";
    return ret;
}

相反，它返回为 [object Object][object Object][object Object][object Object][object Object][object Object]

我想将 ret 输出作为 HTML 呈现给 DOM。我究竟做错了什么？

标签： javascriptreactjs

解决方案

这<button onClick={this.addInput.bind(this, val)} />只是调用的语法糖React.createElement。它返回一个对象。

因此，您将一个对象连接到一个字符串。类似的东西

const a = "string" + {};
// a equals "string[objectObject]"

相反，您应该遵循以下原则：

const someFunc = () => {
    const arr = [];

    for (let i = 0; i < 20; i++) {
        arr.push(<div>{i}</div>);
    }
    return <div>{arr}</div>
}

推荐阅读