react类组件传值踩坑（1）

页面共有四个组件：父组件Todo.js；子组件TodoHead.js和TodoList.js，孙子组件TodoItem.js

父组件Todo.js

	//Todo.js
	render() {
    return (
      <Fragment>
        <div className="box">
          <TodoHead inputText={this.inputText}
            setinputText={this.setinputText}
            addPlan={this.addPlan}
          />
          <TodoList
            todos={this.state.todos}
            changeFinished={this.changeFinished}
            removePlan={this.removePlan}
            />
        </div>
      </Fragment>
    )
  }

子组件TodoList.js

	// TodoList.js
	 render() {
	    return (
	      <Fragment>
	        <ul className="ul">
	          {
	            this.props.todos.length === 0
	            ?
	            <li className="li">暂无待办事项</li>
	            :
	            this.props.todos.map((item, index) => {
	              return (
	                <Item key={index}
	                  keys={index}
	                  plan={item.plan}
	                  finished={item.finished}
	                  removePlan={this.props.removePlan}
	                  changeFinished={this.props.changeFinished}
	                />
	              )
	            })
	          }
	        </ul>
	      </Fragment>
	    )
  }

孙子组件TodoItem.js

	render() {
	    return (
	      <Fragment>
	        {
	          <li className="li">
	            <span>{this.props.plan}</span>
	            <button className="btn change-btn"
	              onClick={() => {
	                this.props.changeFinished(this.props.index)
	              }}>{this.props.finished ? '已完成' : '未完成'}</button>
	            <button className="btn del-btn" onClick={() => {
	              this.props.removePlan(this.props.index)
	            }}>删除</button>
	          </li>
	        }
	      </Fragment>
	    )
  }

子组件TodoList.js向孙子组件传index，因为孙子组件需要用到下标，将key={index}传了过去，发现在孙子组件TodoItem.js的props中key属性为undefined。
仔细思索发现我循环的是孙子组件，所以key被作为fiber算法比较的依据去了，值并没有传给孙子组件，所以将keys={index}传了过去，改一下变量的名字，同时给<Item key={index}>
这样既保证了循环子项的key，又传了值。
初学react很容易遇到这个坑，在此记录，以便后来遇到能查到！