Компонент высшего порядка
A / t в Документы, HOC не изменяет входной компонент и не использует наследование для копирования своего поведения. Скорее, HOC составляет исходный компонент, оборачивая его в компонент-контейнер.
В реакции, если props изменяет компонент, повторно отображается с помощью newProps.
Поскольку в HOC мы передаем свойства обоим компонентам-оболочке test1 и test2, поэтому они оба должны перерисовываться при каждом изменении свойств. Но этого не происходит. Фактически, test1 и test2 визуализируются, а затем test2 меняют реквизиты путем подъема и повторной визуализации состояния. Но test1 остается таким же. Проверьте прикрепленное изображение.
Мне интересно узнать, как react-redux connect и response-router-dom withRouter на самом деле работают при каждом изменении реквизита для сохранения и повторного рендеринга компонента.
class Test extends React.Component {
render() {
return (
<div>
<Test1 />
<Test2 />
</div>
)
}
}Компонент withHOC
class Test1 extends React.Component {
render() {
return(
<div>
{
this.props.test1
}
{
this.props.test2
}
</div>
)
}
}
export default withHOC(Test1);Другой компонент с HOC
class Test2 extends React.Component {
render() {
return(
<div>
{
this.props.test1
}
{
this.props.test2
}
<button type='button' onClick = {()=>this.props.update('test')}>Update </button>
</div>
)
}
}
export default withHOC(Test2);Компонент высшего порядка
function withHOC(WrappedComponent) {
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
test1: 'test1',
test2: 'test2'
}
}
update = (u) => {
this.setState({
test2: u
})
}
render() {
const test1 = this.state.test1;
const test2 = this.state.test2;
return (<WrappedComponent test1 = {test1} test2 = {test2} update = {this.update}/>);
}
}
return Test;
}
export default withHOC;Обновите с помощью кода HOC. При нажатии кнопки состояние обновления setState, и это состояние передается как реквизиты.
Ответы 1
Во-первых, вы не смогли задать здесь вопрос - заголовок поста нужно переписать, чтобы действительно что-то спросить.
Правильно ли я говорю, что вы пытаетесь использовать HOC для разделения состояния между двумя компонентами? А затем ожидать, что обновление в <Test2 /> вызовет обновление в <Test1 />, потому что props.test2 на <Test2 /> изменился?
Если так, то это неправильный способ думать о HOC. Думайте о HOC как о компонентах украшение с определенными свойствами или поведением. Использование withHOC, подробно описанное в вашем вопросе, не говорит: «позволить любому компоненту, заключенному в withHOC, получить доступ к единственному элементу состояния, определенному в этом HOC», оно говорит, что «любой компонент, завернутый в withHOC, должен иметь собственное состояние, определенное функциями, указанными в этот HOC ".
Таким образом, упаковка обоих компонентов, а затем изменение состояния в <Test2 />, изменит ТОЛЬКО состояние в этом конкретном компоненте.
Если вы хотите, чтобы обновление в <Test2 /> вызывало обновление в <Test1 />, то это должно быть сделано с использованием состояния родительского компонента (например, <Test />).
Где
withHOC? Какая именно опора меняется?