时间戳

首页 > 解决方案 > 如何在反应中实现和解概念？

reactjs - 如何在反应中实现和解概念？

问题描述

我想将一个字符串添加到我的列表中，并且我有一个CounterComponent与 分开工作的字符串，我HelloWordComponent为“Microsoft”设置了 1，为“FaceBook”设置了 2，为“React”设置了 3；当我将“雅虎”添加到列表的第一个时，“雅虎”的计数器设置为 1，反应变为 0。

我知道我必须使用唯一密钥并且我认为{name}是合格的，但我不知道在哪里使用key = {name}？

class HelloWordComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>
  }
}

class Counter extends React.Component {
    constructor(){
        super()

        this.onPlusClick = this.onPlusClick.bind(this)

         this.state = {count : 0}
    }

    onPlusClick(){
        this.setState(prevState => ({count: prevState.count + 1}))
    }

    render(){
        return <div>
            {this.state.count}
            <button onClick = {this.onPlusClick}>+</button>
        </div>
    }
}

class App extends React.Component{
  constructor(){
    super()

    this.addName = this.addName.bind(this)

    this.state = {
      name: "Sara",
      list:['Microsoft', 'FaceBook', 'React']
    }

  }

  addName(){
    this.setState(prevState =>({list: ['Yahoo', ...prevState.list]}))
  }

  render(){
    return (
    <div >
      {this.state.name}

      {this.state.list.map(name =>{
        return <div>
          <HelloWordComponent key = {name} name = {name}/>
          <Counter/>
          </div>
      })}

      <br/>
      <button onClick= {this.addName}>add a Name</button>
    </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"> </div>

标签： reactjs

解决方案

我找到了我的问题的正确解决方案，我必须在我的父根元素key = {name}中设置唯一键（ ），以便渲染方法更改为： <div key = {name}>

render(){
    return (
    <div >
      {this.state.name}

      {this.state.list.map(name =>{
        return <div key = {name}>
          <HelloWordComponent name = {name}/>
          <Counter/>
          </div>
      })}

推荐阅读