React动态添加html元素/

Question

我是个新手。我目前有一个组件。这个组件有一个标题和一个主体。正文可以有几个段落，我希望根据每个段落的数量动态添加元素。所以现在我有这样的想法：

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-content中。

提前谢谢你！

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