使用未从JSX呈现到DOM的变量道具映射组件，请作出反应

Question

我试图映射到在父组件的render语句中定义的对象"MetaPrincipleTitles“中的数组。我将道具从对象"MetaPrincipleTitles“传递给我想要创建的组件，每当我向"MetaPrincipleTitles”对象添加道具时，我都希望创建这些组件的新实例，稍后我希望该组件以JSX的形式呈现给浏览器，其中包含对象"MetaPrincipleTitles“数组中相应元素的文本。

父组件：

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

export default class Principles extends Component {
  constructor(props) {
    super(props);
    this.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 => {
      return (
        <MetaPrinciple
          title={MetaPrincipleTitles.IMPT[elm]}
          displayOnlyTitle={true}
        />
      );
    })}

    <AoLDescription
      AoL="Relationships"
      description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
    {MetaPrincipleTitles.RMPT.map(elm => {
      return (
        <MetaPrinciple
          title={MetaPrincipleTitles.RMPT[elm]}
          displayOnlyTitle={true}
        />
      );
    })}

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

// What I want is for the titles of the meta-principles to be inserted into 
a bullet list below the description of the AoL

&子组件：(在父对象的呈现中为对象数组中的每个元素生成一个)

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
};

但由于某些原因，我没有任何新的元素(标题来自对象和标题榆树数组)呈现，我似乎无法弄清楚这一点，谢谢帮助！！

Answer 1

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

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

Answer 2

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

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>
);

}}