Почему у нас есть как state, так и props? Почему у нас нет только одного источника данных? Я хотел бы обновить компонент props и обновить его и все его дочерние элементы. Кажется простым, но я не могу понять, как позволить компоненту обновить свой собственный или его родительский реквизит.
Спасибо за любую помощь.
Философия Реагента заключается в том, что реквизит должен быть неизменным и сверху вниз. Это означает, что родитель может отправлять любые значения поддержки, которые ему нравятся для ребенка, но ребенок не может изменять свои собственные реквизиты. Что вы делаете, так это реагировать на входящие реквизиты, а затем, если хотите, изменить свое дочернее состояние на основе входящих реквизитов.
Итак, вы никогда не обновляете свой собственный реквизит или родительский реквизит. Когда-либо. Вы только обновляете свое собственное состояние и реагируете на значения, которые вы даете родителям.
Если вы хотите, чтобы действие выполнялось на дочернем элементе, который модифицирует что-то в состоянии, то то, что вы делаете, это передать обратный вызов ребенку, который он может выполнить при данном действии. Этот обратный вызов может затем изменить родительское состояние, которое по очереди может отправлять разные реквизиты дочернему при повторной визуализации.
В React, state и props используются разные цели: state позволяет компоненту поддерживать некоторые изменяющиеся значения, а props - это mecanism для распространения этих значений для детей.
Детям не разрешается самостоятельно изменять значения, которые они получают через реквизиты, только потому, что дизайнерам React проще поддерживать приложение, построенное таким образом. Их точка зрения заключается в том, что, когда только одному компоненту разрешено обновлять некоторую часть состояния, легче обнаружить, кто его изменил, и найти корень ошибок.
сам компонент меняет свое состояние и не меняет свои, а дочерние реквизит.
<Parent>
<Child name={ this.state.childName } />
</Parent>
Родитель может изменить свое собственное состояние и изменить дочернее имя, но он изменит реквизит для его детей.
edit1: для вызова событий от дочернего элемента к его родительскому элементу вы должны передать дочернему процессу такой обработчик событий:
var Child = React.createClass({
render: function() {
return (<button onClick={ this.props.onClick }>Hey</button>);
}
});
var Parent = React.createClass({
onChildClick: console.log.bind(console), // will print the event..
render: function() {
return (<Child onClick={ this.onChildClick } />);
}
});
React.renderComponent(<Parent />, document.body);
в этом коде, когда вы нажмете кнопку "Ребенок", он передаст событие родительскому объекту. целью передачи событий является развязка компонентов. возможно, в вашем приложении вам нужно это конкретное действие, но в другом приложении у вас будет, вы будете использовать его по-другому.
В реакторе реквизит протекает вниз, от родителя к дочернему.
Это означает, что, когда мы вызываем ReactDOM.render, React может отображать корень node, пропускать любые реквизиты, а затем забывать об этом node. Это было сделано. Это уже сделано.
Это происходит в каждом компоненте, мы его визуализируем, затем двигаемся вниз по дереву, сначала по глубине.
Если компонент может мутировать свои реквизиты, мы бы изменили объект, доступный родительскому node после того, как родительский node уже отобразил. Это может вызвать все виды странного поведения, например, user.name может иметь одно значение в одной части приложения и другое значение в другой части, и оно может обновиться при следующем запуске рендера.
// App renders a user.name and a profile
const App = (props) =>
React.createElement('div', null, [
props.user.name,
React.createElement(Profile, props}
])
// Profile changes the user.name and renders it
// Now App has the wrong DOM.
const Profile = ({user}) => {
user.name = "Voldemort" // Uh oh!
return React.createElement('div', null, user.name);
}
// Render the App and give it props
ReactDOM.render(
React.createElement(App, {user: {name: "Hermione"}}),
document.getElementById('app'))
);
Мы делаем приложение. Он выводит "Гермиону" в "Теневой ДОМ". Мы представляем профиль, он выводит "Волдеморт" . Приложение теперь неправильно. Он должен сказать "Волдеморт" , потому что user.name - "Волдеморт" , но мы уже выводим "Гермиону", и это слишком поздно, чтобы изменить его.
Значение будет различным в разных частях приложения.
Мутирующий реквизит был бы формой двусторонней привязки. Мы будем изменять значения, на которые может полагаться другой компонент, расположенный выше дерева.
Angular У меня было это, вы могли бы менять любые данные в любое время, где бы вы ни были. Для работы ему понадобился циклический $digest. В принципе, он будет перемещаться вокруг и вокруг, повторно рендерируя DOM, пока все данные не закончили распространение. Это было связано с тем, что Angular 1 был настолько медленным.
вы можете передать родительский объект себе, я имею в виду this
<Parent>
<Child name={this} />
</Parent>
а в компоненте Child Component {this.props.name.state.childname} это работает для меня
В отличие от приведенных здесь ответов, вы фактически можете обновлять реквизиты напрямую, если не возражаете против того, чтобы педантичный кружок рассказывал о "Реагировании". В React.js найдите следующие строки кода:
Object.freeze(element.props);
Object.freeze(element);
и прокомментируйте их. Вуала, изменчивый реквизит!