在 React 中返回 html

Question

我有以下代碼要作為 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。 我究竟做錯了什么？

Answer 1

這個<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>
}

Answer 2

不要將ret定義為字符串，而是嘗試將其定義為數組並將這些元素推送到數組。 附加這樣的字符串不會給你正確的 JSX。

試試看這里： React 正在渲染 [object object] 而不是 JSX