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和action正在我的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从侧边栏呈现一系列元素。

如何将侧边栏中的元素推送到子阵列并将其渲染到我的容器上？

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

Answer 1

在JSX中，<MyComponent>和</MyComponent>之间的内容被视为子项，并作为该组件的children道具传递...这就是您{{1}可能发生的事情您的代码示例中的组件...将<Create />道具的名称更改为其他名称，并查看..

Answer 2

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

Answer 3

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

您无法将this.props.children传递给<Create/>，因为甚至@stafamus提到了一些奇怪的JSX术语。你能尝试做<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。

我希望我能解决问题。

如何使用redux动态添加元素

3 个答案: