我是reactjs的新手 - 我正在尝试将富文本编辑器集成到组件中。组件本身有点复杂，包含循环json片段的各种逻辑。
我想将富文本编辑器放在组件中 - 但是当我把代码放在里面调用它时 - 我放宽了这个范围 - 它在this.state上抱怨。
这是富文本编辑器标记
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
这是当前的代码
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<p>RICH TEXT</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)
但是当我尝试将富文本编辑器放在标记的正确部分时，它会破坏并在此范围内失去范围。
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)