Draft.jsカスタムコンテンツブロックが表示されません

Question

プログラマチックに作成されたブロックの配列からContentStateを作成していますが、ContentStateを使用してEditorStateを作成してもエディタに何も表示されません。カスタムブロックを作成しますか？手動でブロックを作成している場合は

const dummyBlocks = [ new ContentBlock({ 
    key: genKey(), 
    type: 'atomic', 
    depth: 0, 
    text: "This is a test block 1", 
    characterList: List() 

}), new ContentBlock({ 
    key: genKey(), 
    type: 'atomic', 
    depth: 0, 
    text: "This is a test block 2", 
    characterList: List() 

})]; 

const cs = ContentState.createFromBlockArray(dummyBlocks); 

const es = EditorState.createWithContent(cs); 

Answer 1

、あなたが作成しているブロックのテキストのための適切な長さだcharacterListにListを渡す必要があります。

const charData = CharacterMetadata.create(); 
const firstText = "This is a test block 1"; 
const secondText = "This is a test block 2"; 
const dummyBlocks = [ new ContentBlock({ 
    key: genKey(), 
    type: 'atomic', 
    depth: 0, 
    text: firstText, 
    characterList: List(Repeat(charData, firstText.length)) 

}), new ContentBlock({ 
    key: genKey(), 
    type: 'atomic', 
    depth: 0, 
    text: secondText, 
    characterList: List(Repeat(charData, secondText.length)) 

})]; 

あなたがここにCharacterMetadataについての詳細を読むことができます：あなたはもっとこのようになります。必要なものだから、

、代わりの characterList: List()は https://draftjs.org/docs/api-reference-character-metadata.html#content

これは、直接草案のAtomicBlockUtils、あなたは見つけることができたに触発されましたここでは：https://github.com/facebook/draft-js/blob/514490b1322e1c123524eae97d4aea25b4da16ce/src/model/modifier/AtomicBlockUtils.js#L66