reactjs - 如何使用redux动态添加元素

Question

您好，我正在尝试使用 React + 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;

上面的 reducer 和操作正在我的 Layout.js 文件中传递，该文件呈现侧边栏和用于添加元素的容器。

布局.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 从侧边栏渲染元素数组。

如何将元素从侧边栏推送到子数组并将其呈现在容器上？

如果这是重复的，请指导我找到解决方案。如果这还不够，请让我知道我可以对我的问题提供更多说明。提前致谢。

Answer 1

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