Я новичок в 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-контент.
Заранее спасибо!
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>
);
}
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.