Javascript/Reactのmap（）への引数として関数と変数を渡す

Question

verifiedという小道具を各マップ関数で渡したいと思っています。

UPDATE：

がrenderContinentsにverifiedを渡すには動作しますが、ときに、このよう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

、renderCountry/renderCityはcheckAreaアクションでonChange()を呼び出すための最も簡単な方法は、内部にそれらを置くことですAreasComponent（メンバ関数として）。したがって、彼らはonChangeとcheckAreaの両方にアクセスできます。

Answer 2

パラメータ.bindを使用すると、これらのパラメータが関数に渡される最初の値になります。 console.logの出力を見ると気になるはずです。

I.e.あなたは

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

を行うときには、この順序で値を取得する：

function foo(x, y, z) {} 

あなたはあなたの関数のパラメータの順序を切り替えています

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

---

しかし、あなたができますあなたが持っているコードを保つだけです。値をrenderContinentsに渡す必要はありません。 renderContinentsなどにそれを渡すために

、どちらか.bindそれか、別の関数内で呼び出しを置く：

実際に

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