javascript - React 中的对象

Question

const sun_descr = document.getElementById("sun_descr");
const merc_descr = document.getElementById("merc_descr");
const venus_descr = document.getElementById("venus_descr");         

ReactDOM.render(<Planet name="Sun" desctiption="the star..."/>, sun_descr);   
ReactDOM.render(<Planet name="Mercury" desctiption="the smallest..."/>, merc_descr);            
ReactDOM.render(<Planet name="Venus" desctiption="the second..."/>, venus_descr);

我想通过替换来简化这个字符串，例如Sun和sun_descr，对象的元素

var planets = {
                Sun: sun_descr,
                Mercury: merc_descr,
                Venus: venus_descr
            };

React 中如何访问键和值？

https://jsfiddle.net/Nata_Hamster/zg3mj40k/

Answer 1

const planets = [
   { key: 'sun', id: 'sun_descr', component: <Planet name="Sun" desctiption="the star..."/>},
   { key: 'mercury', id: 'merc_descr', component: <Planet name="Mercury" desctiption=""/>},
   { key: 'venus', id: 'venus_descr', component: <Planet name="Mercury" desctiption=""/>},
];


planets.forEach(function(planet) {
  const { component: Component, id } = planet;
  ReactDOM.render(
    Component, 
    document.getElementById(id)
  );
});

这是此 https://codesandbox.io/s/n712yj5v4 的实现希望这有帮助:)