如何用反应中的对象数组呈现组件

Question

设置我的问题:我想对文本文档和文本区域进行排序。数据结构如下：

{"words": ["Horn ", "Cirque ", "Glacier in Longitudinal Section "] }
{"words": ["my other ", "line ", "of texts"] }

在一个数组里。必须使用webComponent对每个句子使用React表示结果：

textContent.map((sentences, index) =>
              <article>
               <desc-sentence>{sentences}</desc-sentence>
              </article>

          )

textContent是包含区域中每个句子的变量。

但是物体在反应中的儿童是无效的。一个数组是如何被命令的，如何用索引传递数组？

*编辑

输出应该是

​

let textContent = [
     {"words": ["Horn ", "Cirque ", "Glacier in Longitudinal Section "]},
     {"words": ["V-shaped valley ", "carved by a river "]}
]

console.log(textContent[0].words);

<section>
<!-- inside the textContent loop of words-->
<article>
  <p>{sentence}</p>  
  <p>{sentence}</p>
 </article>
 <article>
  <p>{sentence}</p>  
  <p>{sentence}</p>
 </article>
</section>

​

Answer 1

下面是基于您的requirement.You的相同代码，可以检查HTML，我认为这主要是您想要的，标记中包含了所有的名称

​

import React from 'react'
class TestJS extends React.Component {
    render(){
        let textContent = [
            {"words": ["Horn ", "Cirque ", "Glacier in Longitudinal Section "]},
            {"words": ["V-shaped valley ", "carved by a river "]}
        ];
        
        let finalStringMessage = [];
        let textContentLength = textContent.length;
        for(let i=0; i < textContentLength; i++){
            let wordsArray = textContent[i].words;
            let articleName = wordsArray.map((sentences, index) =>
                    <desc-sentence>{sentences}</desc-sentence>

            );
            finalStringMessage.push(<article>{articleName}</article>)
        }
        return(
            <div>{finalStringMessage}</div>
        )
    }
}

export default TestJS;

​