如何在React

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 是包含区域中每个句子的变量。

但对象无效，因为儿童在做出反应。建议使用数组，如何使用索引传递数组？

*编辑

输出应该是

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是基于您的要求的相同代码。您可以检查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;