React 动态添加 html 元素/

Question

我是 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 内容中。

提前谢谢你！

Answer 1

所以。如果我们能更多地了解传递到此组件的道具的形状，那将有所帮助，但这应该足以让您继续前进。

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