我不知道最好的方法。
给定一个具有硬编码文本的 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>
)
}
})
现在您可以看到我正在通过 {company.interview.testTypes.questions[0].questionSubDescription} 从 json 文件读取问题
现在我想将答案(即其下面的两个页面)移动到 json 中,并且我想保持 json 中的段落完好无损。这意味着我希望能够将这些带有内容的 p 标签移动到 json“answer”字段中,并且当 React 渲染时,它会像上面一样渲染,内容周围有
标签。
这是 types.json 的部分:
[{
"testTypes": {
"questions": [{
"question": "Can you explain the different types and layers (scopes & boundaries) of tests",
"answer": ""
}]
}
}]
我想将该内容放入答案字段中。换句话说,我想这样写:
<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>
进入我的 json 对象中的 "answer"
字段。
然后我将在我的 React 组件中替换它,并从 json 文件中读取答案:
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>
{company.interview.testTypes.questions[0].answer}
</div>
</div>
</div>
)
}
})
最佳答案
您可以将文本放入数组
"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>;
}
})
关于javascript - 将从 JSON 读取的多段落文本渲染到 React 组件中的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37783240/