Question

我正在尝试创建一个动态元素。无论输入框中的用户输入是什么，都会创建相同数量的LI元素。 当我在输入框中输入2时，我得到此输出。

<li key=0>input 0</li><li key=1>input 1</li>

我想要两个li元素。

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      times: 0
    };
  }
  createList = event => {
    let times = event.target.value;
    this.setState({
      times
    });
  };

  getData = times => {
    let str = "";
    for (let i = 0; i < times; i++) {
      str += "<li key=" + i + ">input " + i + "</li>";
    }
    return <ul>{str}</ul>;
  };
  render() {
    return (
      <div className="App">
        <p className="App-intro">
          <input type="number" onChange={this.createList} />
          {this.getData(this.state.times)}
        </p>
      </div>
    );
  }
}
export default App;

Answer 1

这是因为您将它们视为字符串而不是DOM节点元素。使用数组并推送其中的所有元素并返回最终结果。

不要忘记您正在撰写JSX，let offset = -1; do { offset = bufferA.indexOf(bufferB, offset + 1); if (offset % 8 === 0) { return true; } } while (offset !== -1); return false;将转换为：

<li> input: {i+1} </li>

但如果你写：React.createElement( "li", null, "input: ", i+1 );，它将被视为一个字符串。

通过Babel REPL检查这两种情况的编译代码结果。

<强>解决方案：

像这样写：

"<li>input: {i+1}</li>"

Reactjs - 想要打印动态元素

1 个答案: