Wie Elemente dynamisch mit Hilfe von Redux

Question

hinzugefügt werden Hallo Ich versuche, einen einfachen Form Builder mit react + redux zu erstellen.

Ich habe ein Problem mit dem Hinzufügen von Elementen dynamisch aus der Seitenleiste zum Container.

action.js

export const addNewTextBox =() => { 
    return { 
     type: 'ADD_NEW_TEXT_BOX' 
    }; 
} 

export const addNewName =() => { 
    return { 
     type: 'ADD_NEW_NAME' 
    }; 
} 

export const updateChildren = (child) => { 
    return { 
     type: 'UPDATE_CHILDREN', 
     child 
    }; 
} 

addElementsReducer.js

const initialState = { 
    addFormElementsVisible: false, 
    textBoxNum: 0, 
    nameNum: 0, 
    childKey: 0, 
    children: [] 
} 

const addElements = (state = initialState, action) => { 
    switch (action.type) { 
    case 'ADD_NEW_TEXT_BOX': 
     return Object.assign({}, state, { 
      textBoxNum: state.textBoxNum + 1, 
      childKey: state.childKey + 1, 
     }); 
    case 'ADD_NEW_NAME': 
     return Object.assign({}, state, { 
      nameNum: state.nameNum + 1, 
      childKey: state.childKey + 1, 
     }); 
    case 'UPDATE_CHILDREN': 
     return Object.assign({}, state, { 
      children: state.children.concat([action.child]) 
     }); 
    default: 
     return state 
    } 
} 

export default addElements; 

Die obigen Minderer und Aktion wird in meiner Layout.js Datei übergeben werden, die für das Hinzufügen von Elementen in die Sidebar und den Behälter macht.

Layout.js

<Sidebar 
textBoxNum={this.props.textBoxNum} 
nameNum={this.props.nameNum} 
childKey={this.props.childKey} 
updateChildren={this.props.actions.updateChildren} 
addNewTextBox={this.props.actions.addNewTextBox} 
addNewName={this.props.actions.addNewName}/> 

<Create children={this.props.children}/> 

Von erstelle ich bin Kinder ElementsContainer.js

<div> 
    <div className="new_elements"> 
     {(() => { 
      this.props.children.map((child) => { 
       return (
        <JsxParser 
         components={[TextBox]} 
         jsx={child} 
        /> 
       ); 
      }) 
     })()} 
     </div> 
    </div> 

this.props.children macht eine Reihe von Elementen aus der Seitenleiste zu senden.

Wie schiebe ich die Elemente aus meiner Seitenleiste in das Children's Array und render es auf meinem Container?

Wenn dies ein Duplikat ist, führen Sie mich bitte zur Lösung. Wenn das nicht genug ist, lassen Sie mich bitte wissen, was ich noch genauer erklären kann. Danke im Voraus.

Answer 1

{() => { 
    return(//add return 
    this.props.children.map((child) => { 
    return(
     //your code 
    ) 
    }) 
) 
} 

Answer 2

In JSX, wird der Inhalt zwischen <MyComponent> und </MyComponent> Kinder gelten und werden als children Requisiten dieser Komponente übergeben ... Das ist, was auf Ihre <Create /> Komponente in Ihrem Codebeispiel kann passieren ... Ändern Sie den children prop Name um etwas anderes, und sehen ..

Answer 3

Soweit ich das Problem verstehen, ist eine dieser zwei Dinge: weil einige seltsame JSX Nomenklatur

1. Sie nicht in der Lage sind this.props.children-<Create/> passieren das sogar @stafamus erwähnt. Können Sie versuchen, stattdessen <Create passingMyChildren={this.props.myChildren}/> zu tun? wo Sie das Array von <Sidebar> Komponenten in myChildren statt children speichern könnten. Obwohl ehrlich gesagt, denke ich, dass dies das Problem sein sollte, dass Sie unter <Create/> Level nichts erhalten können. aber nochmal, lasst uns es versuchen. Es könnte möglicherweise wegen eines reservierten Schlüsselwortes für reagieren. Sie können Ihrer Requisite keinen Namen geben, da dies ein reserviertes Keyword wäre. Versuchen wir auch, zu sehen, ob das funktioniert. Here.

2. Ich gehe davon aus Sie mehrere <Sidebar> Elemente werden in Ihrem this.props.children Array wollen so <Create> es machen kann. Das ist mein Verständnis des Problems. Wenn Sie in JSX ein Array von View-Elementen oder div-Elementen erstellen müssen, können Sie so etwas tun.

   var myChildren = []; 
   for(var i=0; i<numOfChildren; i++){ 
       myChildren.push(<Sidebar/>); 
   } 
   

   und dann myChildren zu <Create/> passieren:

   var rows = []; for (var i=0; i < numrows; i++){ rows.push(<ObjectRow />); } return <tbody>{rows}</tbody>;

In Ihrem Fall, die sein sollte herausstellen. Ich nehme an, Sie wissen, wie man den <Create/> Code schreibt. Wie in, in der Lage sein, eine Liste Art der Struktur zu rendern, die mehrere ObjectRows haben könnte.

Ich hoffe, ich habe das Problem richtig.