Question

我想通过调用函数renderDiv(num)来动态显示div，其中num将是div的相应编号。因此，如果我按下一个调用renderDiv方法的按钮，div应显示为带有文本＆＃39; 1＆＃39;如果我再次按下按钮，另一个div应出现在第一个div应该说＆＃39; 1＆＃39;但第二个div应该说＆＃39; 2＆＃39;。我正在使用现在存放在该州的一个柜台。

<button onClick={this.renderDiv(this.state.numDivs)}>Add Div</button>

但是，当我再次点击该按钮时，第一个Div也会获得更新的变量，并且div显示＆＃39; 2＆＃39;。这是一个小问题，但我似乎无法找到办法。

Answer 1

在不知道代码的其余部分的情况下，我会做这样的事情。这允许您使用数组上的index作为计数器，而不是使用数字计数器来计算您的div：

class DivRenderer extends Component {

  state = { divs: [] }

  addDiv = () => {
    const { divs } = this.state;

    this.setState({ divs: [...divs, {}] });
  }

  render() {
    const { divs } = this.state;

    return (
      <div>
        {divs.map((div, index) => (<div>{index + 1}</div>)}
        <button onClick={this.addDiv}>Add Div</button>
      </div>
    );
  }
}

Answer 2

略有不同。更改numDivs将导致您的组件重新渲染，这将产生我认为您正在寻找的相同结果：

class Blah extends React.Component {

  constructor() {
    super();
    this.state = { numDivs: 0 };
  }

  renderDivs() {
    let divs = [];   
    for(let i = 0; i < this.state.numDivs; i++) {
      divs.push(<div key={i}>Div {i+1}</div>);
    }

    return divs;
  }

  render() {
    return (
      <div>
        <button onClick={() => { this.setState({numDivs: this.state.numDivs+1}); }}>Add</button>
       {this.renderDivs()}
     </div>
   );
 }
}

使用state来动态显示计数感知div

2 个答案: