Реагировать динамически, добавляя HTML-элементы /

Question 1

Я новичок в React. У меня в настоящее время есть компонент. Этот компонент имеет заголовок и тело. Тело может иметь несколько абзацев, и я хочу динамически добавлять элементы в зависимости от количества абзацев в каждом. Итак, сейчас у меня есть это:

import React from 'react';

class Content extends React.Component{
    render(){
        var props_list = this.props;
        var keys = Object.keys(props_list);
        console.log(props_list["title"]);

        for (var i = 0; i < keys.length; i++){
            console.log(props_list[keys[i]]);
        }

        return (
            <div className="introduction">
                <h3>{props_list["title"]}</h3>
                <div className="div-content">

                </div>
            </div>
        );
    }
}

export default Content;

Теперь с помощью этого кода я могу получить все реквизиты и информацию, которые он добавляет к каждому компоненту, но я понятия не имею, как динамически добавлять эту информацию в div-контент.

Заранее спасибо!

javascript reactjs

0

pikachungg 21 Дек 2019 в 04:19

Answer

Так. Если бы мы могли больше узнать о форме реквизита, передаваемого в этот компонент, это помогло бы, но этого должно быть достаточно, чтобы вы начали.

import React from 'react';

class Content extends React.Component{
   render(){
    var props_list = this.props;
    var keys = Object.keys(props_list);
    console.log(props_list["title"]);
            const paragraphs = [];
    for (var i = 0; i < keys.length; i++){
        console.log(props_list[keys[i]]);
        // This part is to make sure you are not re-rendering your title.
        if(keys[i] !== "title"){
            paragraphs.push(<p>props_list[keys[i]]</p>);
        }      
    }

    return (
        <div className="introduction">
            <h3>{props_list["title"]}</h3>
            <div className="div-content">
              {paragraphs}
            </div>
        </div>
    );
 }
}

0

FujiRoyale 21 Дек 2019 в 02:32

Question 2

Так. Если бы мы могли больше узнать о форме реквизита, передаваемого в этот компонент, это помогло бы, но этого должно быть достаточно, чтобы вы начали.

import React from 'react';

class Content extends React.Component{
   render(){
    var props_list = this.props;
    var keys = Object.keys(props_list);
    console.log(props_list["title"]);
            const paragraphs = [];
    for (var i = 0; i < keys.length; i++){
        console.log(props_list[keys[i]]);
        // This part is to make sure you are not re-rendering your title.
        if(keys[i] !== "title"){
            paragraphs.push(<p>props_list[keys[i]]</p>);
        }      
    }

    return (
        <div className="introduction">
            <h3>{props_list["title"]}</h3>
            <div className="div-content">
              {paragraphs}
            </div>
        </div>
    );
 }
}

0

FujiRoyale 21 Дек 2019 в 02:32

Реагировать динамически, добавляя HTML-элементы /

1 ответ

Похожие вопросы

Новые вопросы

javascript