は、私が現在使用している

Question

を反応させるの小道具をレンダリングするために反応し、このようになりますどのarea呼ば：

[{ 
    "id": 1, 
    "name": "Europe", 
    "Countries": [{ 
     "id": 1, 
     "name": "Iceland", 
     "Cities": [{ 
      "id": 1, 
      "name": "Selfoss" 
     }] 
    }, { 
     "id": 2, 
     "name": "Switzerland", 
     "Cities": [{ 
      "id": 2, 
      "name": "Geneva" 
     }] 
    }] 
}, { 
    "id": 2, 
    "name": "Asia", 
    "Countries": [{ 
     "id": 3, 
     "name": "Japan", 
     "cities": [{ 
      "id": 3, 
      "name": "Yokohama" 
     }] 
    }] 
}] 

UPDATE 2--

このWORKSを：

class AreaBar extends Component { 
    constructor(props) { 
    super(props); 
    } 

    ..... 

    renderCountries() { 
    return(
     <div> 
     This is the country 
     </div> 
    ) 
    } 

    renderContinents() { 
    return(
     <div> 
     This is the continent 
     {this.renderCountries()} 
     </div> 
    ) 
    } 

    render() { 
    return(
     <div> 
      {this.renderContinents()} 
     </div> 
    ); 
    } 
} 

この出力：

マップを組み込む

、このが

renderContinents(area) { 
    return(
     <div> 
     {area.name} 
     </div> 
    ) 
    } 

    render() { 
    return(
     <div> 
      {this.props.areas.map(this.renderContinents)} 
     </div> 
    ); 
    } 
} 

この出力WORKS：

Europe 
Asia 

しかし私は{this.renderCountries()}を含む場合、それは私がなぜだと思う何も出力、しませんが働くための提案を得ることができませんでした。 Firefoxのオン

renderCountries() { 
    return(
     <div> 
     This is the country   
     </div> 
    ) 
    } 


    renderContinents(area) { 
    return(
     <div> 
     {area.name} 
     {this.renderCountries()} 
     </div> 
    ) 
    } 


    render() { 
    return(
     <div> 
      {this.props.areas.map(this.renderContinents)} 
     </div> 
    ); 
    } 
} 

大陸の両方が現れたが、その代わり、私はrenderCountriesを実行することはできませんと言っているように思え

unreachable code after return statement 

When an expression exists after a valid return statement, 
a warning is given to indicate that the code after the return 
statement is unreachable, meaning it can never be run. 

を得る「この国では表示されません」。私はまだこれについて少し混乱していますが、私はコンポーネントを分けて問題を修正しようとしていると思います。

Answer 1

2つのこと：

1）あなたの質問のコードの第二のブロックでは、あなたはarea.countries.mapをやっています。 areaオブジェクトのキーは、countriesではなくCountriesと呼ばれます。 area.countriesは未定義です。

2）area.Countriesは、ご質問のように、オブジェクトの配列です。そう、はい、それらを上手くマッピングできます。問題は各Countryがオブジェクトであるため、renderCountries関数の<div>の子としてオブジェクトをレンダリングしようとしていることです。国名のみを表示する場合は、次のようにします。

renderCountries(country){ 
    return(
    <div> 
    {country.name} 
    </div> 
) 
} 

次に、意味のある出力が表示されます。 Area、CountryとCity：

Answer 2

あなたは、タイプミスを持っている代わりにarea.countries

のarea.Countriesを使用また、私はあなたが、少なくとも3つのコンポーネントを作成するべきだと思います。次に、データをレンダリングすることができます（私はES6構文を使用しています）。

var areas = [/* array you posted above*/]; 

// in your top-level component 
render() { 
return (<div> 
    {areas.map((area) => { 
    return <Area data={area}/>; 
    })} 
</div>); 
} 


// Area component 
export function Area({data}) { 
render() { 
    return (<div> 
    Area name: {data.name} 
    {data.Countries.map((country) => { 
    return <Country data={country}/> 
    })} 
    </div>); 
} 
} 

// Country component 
export function Country({data}) { 
render() { 
    return (<div> 
    Country: {data.name} 
    {data.Cities.map((city) => { 
    return <City data={city}/> 
    })} 
    </div>); 
} 
} 

// City component 
export function City({data}) { 
render() { 
    return (<div> 
    City: {data.name} 
    </div>); 
} 
}