Отображение компонентов с переменным реквизитом, не рендерингом из JSX в DOM, React - PullRequest
Новая
       12

Отображение компонентов с переменным реквизитом, не рендерингом из JSX в DOM, React

0 голосов
/ 07 января 2019

Я пытаюсь отобразить массив в объекте "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
};

Но по какой-то причине у меня нет новых элементов (титры, поступающие с объекта с массивами титров вязов), я не могу понять это, спасибо за помощь !!

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Я думаю, что это может быть полезно для вас. Гудлак 

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

}}
0 голосов
/ 07 января 2019

Ошибка внутри функции карты. elm - это уже нужный элемент, значение MetaPrincipleTitles.IMPT[elm] не определено 

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