将具有可变属性的组件映射到不从 JSX 渲染到 DOM，React

Question

我正在尝试映射我在 parent 组件的渲染语句中定义的 object "MetaPrincipleTitles" 中的数组。我正在将道具从 object "MetaPrincipleTitles" 传递到我想要创建的组件，我想在每次向 "MetaPrincipleTitles" 添加道具时创建这些组件的新实例 object 然后我希望该组件使用 object "MetaPrincipleTitles".

数组中相应元素的文本作为 JSX 呈现给浏览器

Parent分量：

    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

&Child分量： （在 parent 的渲染中为 object 数组中的每个元素生成一个）

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

但出于某种原因，我没有任何新元素（来自 object 的带有标题榆树数组的标题）渲染，我似乎无法弄清楚，感谢您的帮助！！

Answer 1

错误在地图函数内部。 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>
);

}}

将具有可变属性的组件映射到不从 JSX 渲染到 DOM，React

Mapping components with variable props not rendering from JSX to DOM, React

return

renderscript

reactjs