Reactjs 如何使用redux动态添加元素

嗨，我正在尝试使用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和action在my 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}/>

从create我将子元素发送到ElementsContainer.js

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

{(() => {
this.props.children.map（（child）=>{
返回(
);
})
})()}

this.props.children

从侧边栏呈现元素数组

如何将边栏中的元素推送到childrens数组中，并在容器中进行渲染

---

如果这是一个重复，请指导我的解决方案。如果这还不够，请让我知道我可以对我的问题提供更多的澄清。提前感谢。

在JSX中，

和

之间的内容被视为子级，并作为该组件的

子级

道具传递。。。这就是代码示例中的

组件可能发生的情况。。。将

儿童

道具的名称更改为其他名称，然后查看..

据我所知，问题是以下两件事之一：

您无法将

this.props.children

传递给

，因为甚至@stafamus都提到了一些奇怪的JSX命名法。你能试着改用

吗？您可以将

组件数组存储在myChildren而不是

children

中。尽管坦率地说，我认为这应该是您无法在

级别接收任何内容的问题。但是，让我们再次尝试一下。可能是因为react保留了一个关键字。就像你不能给你的道具命名为“this”，因为那是一个保留的关键字。类似地，让我们试着看看这是否有效

我假设您希望在

this.props.children

数组中有多个

元素，以便

可以渲染它。这是我对问题的理解。在JSX中，如果必须创建视图元素或div元素的数组，可以执行以下操作

var行=[]；
对于（变量i=0；i

在你的情况下，结果应该是：

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

var myChildren=[]；
for（var i=0；i
是父容器，它将其道具传递给呈现
{this.props.children}的
将作为子项传递
null
，无论发生什么
此.props.children
是…因为它是自动关闭的，即它没有任何子项…我理解为您希望在Redux状态下将
子项传递到
元素容器
；然后，通过类似这样的方式传递它：
>并在内部修改
Create
组件，将该道具传递给
ElementContainer
。请注意，
children
作为道具在JSX上下文中具有不同的含义，因此我建议将其更改为其他内容，例如，
myChildren
。您所说的
在内部修改Create组件以传递该道具是什么意思at道具至元素容器
{() => {
  return( //add return
   this.props.children.map((child) => {
    return(
        //your code
      )
  })
 )
}