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

您可以简单地使用。操作员访问对象console.log（obj.key）

如果是类似数组

string

然后您可以使用forEach，map函数根据需要遍历反应

Answer 2

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的实现，希望对您有所帮助：）

React中的对象

2 个答案: