Reactjs 使用变量props将组件从JSX映射到DOM，React

我试图映射父组件的render语句中定义的对象元原则中的数组。我将道具从对象元原则传递到我要创建的组件，每次向MetaPrincipleteTles对象添加道具时，我都希望创建这些组件的新实例，稍后我希望该组件以JSX的形式呈现到浏览器中，并带有对象MetaPrincipleteTles数组中相应元素的文本

父组件：

&子组件： 在父对象的渲染中，为对象数组中的每个元素生成一个

import React, { Component, Fragment } from "react";
import propTypes from "prop-types";

export default class MetaPrinciple extends Component {
  render() {
    if (this.props.displayOnlyTitle) {
      return <h1>{this.props.title}</h1>;
    }

return (
  <Fragment>
    <h1>{this.props.title}</h1>
    <h2>This is not only displaying title. OBESERVEEEEE</h2>
  </Fragment>
);
  }
}

MetaPrinciple.propTypes = {
  title: propTypes.string.isRequired,
  displayOnlyTitle: propTypes.bool
};

---

但由于某些原因，我没有任何新元素标题来自于标题榆树渲染数组的对象，我似乎无法理解这一点，感谢您的帮助

错误在map函数中。elm已经是您想要的元素，MetaPrincipleTitles.IMPT[elm]的值未定义

{MetaPrincipleTitles.IMPT.map(elm => {
      return (
        <MetaPrinciple
          title={elm}
          displayOnlyTitle={true}
        />
      );
    })}

---

我认为这对你会有帮助。 祝你好运

import React, { Component, Fragment } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";

export default class Principles extends Component {
constructor(props){ 
    super(props);

    props = {
        metaPrincipleTitle: null
    };

}

render() {
    const MetaPrincipleTitles = {
    IMPT: [
        // Intellectual Meta-Principle Titles
        "Learn, Grow, Evolve. Be Anti-Fragile",
        `Boost odds of success through de-centralized principle-guided decision-making`,
        "Accrue power"
    ],

    RMPT: [
        // Relationship Meta-Principle Titles
        "Communicate well",
        "Choose economically",
        "Connect with people spiritually"
    ],
    PMPT: [
        // Physical Meta-Principle Titles
        "Eat well",
        "Make decisions on the meta-level of your body",
        "Build strength",
        "Build muscle",
        "Prevent injuries",
        "Stay Healthy"
    ],

    SMPT: [
        // Spiritual Meta-Principle Titles
        "LGE biochemistry",
        "Boost Love & Reduce Suffering",
        "Relax/sleep",
        "Practice Meta-cognition"
    ]
};

// map over array of titles of metaPrinciples

return (
<Fragment>
    <AoLDescription
    AoL="Intellectual"
    description="Intellectual Principles are pragmatic principles for understanding and influencing complex systems of reality.
    All of the principles in this Area of Life relate to the mechanisms by which we can change reality towards more Love & less Suffering. These include the top level (or Meta-) principles:"
    />

    {
        MetaPrincipleTitles.IMPT.map((elm, index) =>  
            <MetaPrinciple
            title={elm}
            displayOnlyTitle={true}
            key = {index}
            /> 
        )
    }

    <AoLDescription
    AoL="Relationships"
    description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
    {
        MetaPrincipleTitles.RMPT.map((elm, index) =>  
            <MetaPrinciple
                title={elm}
                displayOnlyTitle={true}
                key={index}
            /> 
        )
    }

    <AoLDescription
    AoL="Physical"
    description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
    <AoLDescription
    AoL="Spiritual"
    description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
</Fragment>
);

}}

---

有趣的是，使用key={index}与不使用key={index}相比有什么好处？每个映射项在react中都必须是唯一的key。如果不写入key，react将返回警告。在浏览器中打开concole，然后使用key或不使用key进行测试。谢谢Ronnlidd

import React, { Component, Fragment } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";

export default class Principles extends Component {
constructor(props){ 
    super(props);

    props = {
        metaPrincipleTitle: null
    };

}

render() {
    const MetaPrincipleTitles = {
    IMPT: [
        // Intellectual Meta-Principle Titles
        "Learn, Grow, Evolve. Be Anti-Fragile",
        `Boost odds of success through de-centralized principle-guided decision-making`,
        "Accrue power"
    ],

    RMPT: [
        // Relationship Meta-Principle Titles
        "Communicate well",
        "Choose economically",
        "Connect with people spiritually"
    ],
    PMPT: [
        // Physical Meta-Principle Titles
        "Eat well",
        "Make decisions on the meta-level of your body",
        "Build strength",
        "Build muscle",
        "Prevent injuries",
        "Stay Healthy"
    ],

    SMPT: [
        // Spiritual Meta-Principle Titles
        "LGE biochemistry",
        "Boost Love & Reduce Suffering",
        "Relax/sleep",
        "Practice Meta-cognition"
    ]
};

// map over array of titles of metaPrinciples

return (
<Fragment>
    <AoLDescription
    AoL="Intellectual"
    description="Intellectual Principles are pragmatic principles for understanding and influencing complex systems of reality.
    All of the principles in this Area of Life relate to the mechanisms by which we can change reality towards more Love & less Suffering. These include the top level (or Meta-) principles:"
    />

    {
        MetaPrincipleTitles.IMPT.map((elm, index) =>  
            <MetaPrinciple
            title={elm}
            displayOnlyTitle={true}
            key = {index}
            /> 
        )
    }

    <AoLDescription
    AoL="Relationships"
    description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
    {
        MetaPrincipleTitles.RMPT.map((elm, index) =>  
            <MetaPrinciple
                title={elm}
                displayOnlyTitle={true}
                key={index}
            /> 
        )
    }

    <AoLDescription
    AoL="Physical"
    description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
    <AoLDescription
    AoL="Spiritual"
    description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
</Fragment>
);

}}