Question

这肯定很简单，但我不明白它是如何工作的。我尝试绑定复选框状态和状态显示不同的字符串。它与Redux在React中。下面的代码（粗体字）

容器：

 class DropingList extends Component {
  **conditionHandler() {
    if(this.props.pet === 'cat'){
      return "YEAH!!!"
    }else {return null;}**
  }
  render() {
    return (
      <div>
        <AddHimHer
          click={this.props.onAddMan}
        />
      { this.props.pers.map(per =>(
        <NewPerson
          key={per.id}
          click={() => this.props.onManDown(per.id)}
          name={per.name}
          age={per.age}
          **animal={this.conditionHandler(this.props.pet)}**
        />
      ))
      }

      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    pers: state.persons
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onAddMan: (name,age,**pet**) => dispatch({type:actionTypes.ADD_MAN, data: {nam: name, ag: age, **superp: pet**}}),
    onManDown: (id) => dispatch({type:actionTypes.MAN_DOWN, Id: id})
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(DropingList);

成分：

const NewPerson = (props) => (
  <div onClick={props.click}>
  <h1>Is {props.name} a SUPERHERO? ? ???</h1>
  <h2>He is {props.age} years old</h2>
  **<h1>{props.animal}</h1>**
  </div>
);

export default NewPerson;

减速器：

const initState = {
  persons: []
}

const personReducer = (state = initState,action) => {
  switch (action.type) {
    case actionTypes.ADD_MAN:
      const newMan = {
        id: Math.random(),
        name: action.data.nam,
        age: action.data.ag,
        **pet: action.data.superp**
      };
      return {
        ...state,
        persons: state.persons.concat(newMan)
      };
    case actionTypes.MAN_DOWN:
    return {
      ...state,
      persons: state.persons.filter(person => person.id !== action.Id)
    };
  }
  return state;
};

export default personReducer;

我仍然是React和Redux的新人。我想我已经有了一些东西。你能告诉我我的代码有什么问题吗？

Answer 1

问题是pet是对象的一部分（数组的每个对象），而不是单独的prop，所以你需要在map回调函数中使用per.pet，如下所示：

{this.props.pers.map(per =>(
    <NewPerson
      key={per.id}
      click={() => this.props.onManDown(per.id)}
      name={per.name}
      age={per.age}
      animal={this.conditionHandler(per.pet)}       // here
    />
))}

现在您将pet值传递给函数conditionHandler，因此无需在this.props.pet内部直接使用pet，如下所示：

conditionHandler(pet) {
    if (pet === 'cat') {
      return "YEAH!!!"
    } else {
        return null;
    }
}

React with Redux中的复选框上的条件

1 个答案: