如何使用redux動態添加元素

嗨我想創建一個簡單的表單生成器使用react + redux。如何使用redux動態添加元素

我面臨着從邊欄動態添加元素到容器的問題。

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;

上述減速器和動作在這使得側欄和用於添加元素的容器我Layout.js文件傳遞。

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}/>

從創建我送孩子ElementsContainer.js

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

this.props.children呈現從側邊欄元素的數組。

如何將我的邊欄中的元素推送到childrens數組並將其呈現在我的容器上？

如果這是一個重複的好心指導我的解決方案。如果這還不夠，請讓我知道我可以在我的問題上提供更多的解釋。提前致謝。

來源

2017-05-29 leoc1f3r

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

來源

2017-06-02 08:59:26

這工作。非常感謝：） – leoc1f3r

在JSX，<MyComponent>和</MyComponent>之間的內容被認爲是兒童，作爲該組件的children道具傳遞......那是什麼，可以發生在你的代碼示例中你<Create />組件...更改children道具的名字到別的東西，看看..

來源

2017-05-29 22:25:03 stafamus

''是被它的道具向下傳遞到父容器''這使得'{this.props.children}'' – leoc1f3r

<創建兒童= {this.props。不管什麼'this.props.children'是...因爲它是自閉的，所以兒童} />''會通過'null'作爲孩子。它沒有任何孩子......我理解你想把你的Redux狀態下的'children'傳遞給'ElementContainer';然後，通過類似這樣的方式傳遞它：''並在內部修改'Create'組件以將該prop傳遞給'ElementContainer'。請注意，作爲道具的「children」在JSX環境中具有不同的含義，因此我建議將其改爲其他內容，例如'myChildren'。 – stafamus

你是什麼意思？'在內部修改Create組件以將該道具傳遞給ElementContainer' – leoc1f3r

據我瞭解的問題是這兩種情況之一：

您無法通過this.props.children到<Create/>因爲一些奇怪的JSX命名甚至@stafamus提到。你可以試試<Create passingMyChildren={this.props.myChildren}/>嗎？在那裏你可以將<Sidebar>組件的數組存儲在myChildren中，而不是children。儘管坦率地說，我認爲這應該是您無法在<Create/>級別收不到任何東西的問題。但是，再次，讓我們試試看。這可能是因爲反應的保留關鍵字。就像你不能給你的道具一個名字「this」，因爲那將是一個保留關鍵字。同樣，我們試試看看它是否有效。 Here.
我假設你想多<Sidebar>元素是你this.props.children陣列內部，<Create>能呈現它。這是我對這個問題的理解。在JSX中，如果你必須創建一個View元素或div元素的數組，你可以這樣做。

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

在你的情況，應該練得：

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

，然後傳遞到myChildren <Create/>。我假設你知道如何編寫<Create/>代碼。如在中，能夠呈現可能具有多個ObjectRows的列表類型的結構。

我希望我得到了正確的問題。

來源

2017-06-01 19:53:22

試過這個。但沒有解決我的問題。 – leoc1f3r

如何使用redux動態添加元素

回答

相關問題