Javascript 将从JSON读取的多段文本呈现到React组件中的最佳方法

我不知道最好的办法

给定具有硬编码文本的React组件：

const TestTypes = Component({
    store: Store('/companies'),
    render(){
        var company = this.store.value()[this.props.companyId];

        return (
            <div id='ft-test-types className="all-100"'>
                <p className="section-heading bold padding-top-20 font-22">Types of Tests</p>
                <div className="all-100 padding-left-30 align-left">
                    <div className="all-100 align-left">
                        <p className="bold blue margin-2">{company.interview.testTypes.questions[0].question}</p>

                        <p className="italic padding-left-30 padding-top-20">
                            bunch of text for this paragraph...
                        </p>  
                        <p className="italic padding-left-30">
                            More text in this paragraph
                        </p>

                    </div>
                </div>
            </div>
        )
    }
})

我想把这些内容放到答案栏。换句话说，我想说：

<p className="italic padding-left-30 padding-top-20">
    bunch of text for this paragraph...
</p>  
<p className="italic padding-left-30">
    More text in this paragraph
</p>

---

您可以将文本放入数组中

"answer": [
  'bunch of text for this paragraph...',
  'More text in this paragraph'
]

然后在组件内部使用它

const TestTypes = Component({
  store: Store('/companies'),
  render(){
    var company = this.store.value()[this.props.companyId];
    var answer = company.interview.testTypes.questions[0].answer.map(function (text, index) {
      const paddingTopClass = index === 0 ? 'padding-top-20' : '';

      return <p
        key={ index }
        className={ `italic padding-left-30 ${ paddingTopClass }` }
      >
        { text }
      </p>
    });

    return <div id='ft-test-types className="all-100"'>
      <p className="section-heading bold padding-top-20 font-22">Types of Tests</p>
      <div className="all-100 padding-left-30 align-left">
        <div className="all-100 align-left">
          <p className="bold blue margin-2">
            {company.interview.testTypes.questions[0].question}
          </p>

          { answer }
        </div>
      </div>
    </div>;
  }
})

const TestTypes=组件({
商店：商店（“/公司”），
render（）{
var company=this.store.value（）[this.props.companyId]；
var answer=company.interview.testTypes.questions[0]。answer.map（函数（文本，索引）{
const paddingTopClass=index==0？'padding-top-20'：''；
返回

{text}

});
返回
测试类型


{company.interview.testTypes.questions[0]。question}

{答案}
;
}
})

您可以将文本放入数组中

"answer": [
  'bunch of text for this paragraph...',
  'More text in this paragraph'
]

然后在组件内部使用它

const TestTypes = Component({
  store: Store('/companies'),
  render(){
    var company = this.store.value()[this.props.companyId];
    var answer = company.interview.testTypes.questions[0].answer.map(function (text, index) {
      const paddingTopClass = index === 0 ? 'padding-top-20' : '';

      return <p
        key={ index }
        className={ `italic padding-left-30 ${ paddingTopClass }` }
      >
        { text }
      </p>
    });

    return <div id='ft-test-types className="all-100"'>
      <p className="section-heading bold padding-top-20 font-22">Types of Tests</p>
      <div className="all-100 padding-left-30 align-left">
        <div className="all-100 align-left">
          <p className="bold blue margin-2">
            {company.interview.testTypes.questions[0].question}
          </p>

          { answer }
        </div>
      </div>
    </div>;
  }
})

const TestTypes=组件({
商店：商店（“/公司”），
render（）{
var company=this.store.value（）[this.props.companyId]；
var answer=company.interview.testTypes.questions[0]。answer.map（函数（文本，索引）{
const paddingTopClass=index==0？'padding-top-20'：''；
返回

{text}

});
返回
测试类型


{company.interview.testTypes.questions[0]。question}

{答案}
;
}
})