Question

我对React和Redux比较陌生。喜欢它，但是在将组件作为子组件传递到其他组件并使其显示时遇到了问题。我目前正在处理一个巨大的Form.js文件，其中包含所有面板，但是将它们作为单独的组件进行维护会更容易。

我有一个大型的客户数据表格。表单的每个部分都是选项卡/面板格式。能够将每个选项卡面板作为一个单独的组件很好，但是我似乎无法通过将每个选项卡作为子代传递来显示每个面板。

Page.js

// file imports....

// constructor, handleChange, handleSubmit, 


render() {
    return <div className="page">
        <div className="page-content">

            <Form {...this.state}
                onChange={this.handleChange} onSubmit={this.handleSubmit} >

                <Details {...this.state} onChange={this.handleChange} />

            </Form>

        </div>
    </div>
}
}

export default Page

Form.js

// file imports....




const Form = ({ client, errors, onChange, onSubmit }, props) => {

  function handleChange(name, value) {
    if (value !== client[name]) {
      onChange(name, value)
    }
  }

  return <form onSubmit={e => onSubmit(e)}>

        <Heading client={client} />    
        <TabNavigation />  

        <div className="tab-content">


          {props.children}  



          </div>
        </form>

}

Form.displayName = displayName
Form.propTypes = propTypes

export default Form

Details.js

// file imports....



const Details = ({ client, errors, onChange }) => {

    function handleChange(name, value) {
        if (value !== client[name]) {
            onChange(name, value)
        }
    }
        return(
        <div className="tab-pane active animation-slide-left" id="details" role="tabpanel">


                  ............   more form data  .........
            </div>

        </div>




    )

}

Details.displayName = displayName
Details.propTypes = propTypes

export default Details;

Answer 1

您需要使用...语法来正确获取其余道具。

const Form = ({ client, errors, onChange, onSubmit , ...props}) => {

通过主Form组件将组件作为子代传递

1 个答案: