将函数和变量作为参数传递给Javascript/React中的map()

Question

我想传递一个verified通过每个地图功能调用的道具,我很难设置它.

更新:

传递verified给renderContinents可以工作,但是当向renderCountry添加一个参数时,如下所示:

  {continent.countries.map(renderCountry(null, verified))}

我的输出是空白的.这不应该工作吗？

更新的代码:

  const renderCities = cities => {
    return (
      <div>
        <label>
          <input
              onChange={onChange}
              type="checkbox"/>
        {cities.name}
        </label>
      </div>
    );
  };

  const renderCountries = ({country, verified}) => {
    console.log("came to country");
    return (
      <div className="city-location"> 
        <label>
            <input
              onChange={onChange}
              type="checkbox"/>
          {country.name}
        </label>
        {country.cities.map(renderCities)}
      </div>
    ); 
  };



function onChange(e) {
  console.log('checkbox verified:', (e.target.verified));
}


class AreasComponent extends Component {
      constructor(props) {
        super(props);
        this.state = { 
        };
        this.renderContinents = this.renderContinents.bind(this);
    }

  componentWillMount() {
    this.props.fetchAllAreas(); 
  }

  renderContinents(verified, continent) {
    console.log("came to continent");
      return(
        <div className="continent-location">
          <label>
            <input
              onChange={onChange}
                type="checkbox"/>
             {continent.name}
          </label>

          {continent.countries.map(renderCountries(null, verified))}

        </div>
    )
  } 


  render() { 
    if (!this.props.verified || !this.props.areas) {
      return <div>Loading Areas...</div>
    }
    return(
        <div> 
          {this.props.areas.map(this.renderContinents.bind(this, this.props.verified))}
        </div>
      );
    }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchAllAreas, checkArea}, dispatch);
}


function mapStateToProps(state) {
  return { areas: state.areas.all,
           verified:state.areas.verified
  };
}


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

我的另一个问题是onChange(e)功能.它是全局的,所以当我点击任何复选框时它可以工作,但我想这样做,以便当点击onChange时,它可以接受一个参数并调度动作checkArea,这对我来说意味着它必须被绑定并且还应该被输入作为参数.我试过这个:

  {this.props.areas.map(this.renderContinents.bind(this, this.props.verified, this.props.checkArea))} 

但它返回一个空白结果.是否可以将函数发送到map()参数中,是否有办法让renderCountry/renderCity与参数一起使用？

Answer 1

当你.bind的参数,这些参数成为第一个值(一个或多个)传递给函数.您应该注意到在查看console.log输出时.

即,当你这样做

var bar = foo.bind(this, x, y);
bar(z);

您按此顺序获取值:

function foo(x, y, z) {}

您已在函数中切换参数的顺序:

renderContinent(checked, continent) {
  // ...
}

但是,您可以保留您拥有的代码.您不必将值传递给renderContinents.

为了将它传递给renderContinentsetc,.bind或者将调用放在另一个函数中:

continent.countries.map(renderCountries.bind(null, verified))
// or
continent.countries.map(country => renderCountries(country, verified))