Я относительно новичок в 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;