그래서 ReactComponent가 여러 개 있습니다. 처음에는 부모 컴포넌트 (일종의 GrandPa라고 부름)를 자체 상태로 생각하고 상태에 대한 정보를 다른 컴포넌트 (부모라고 부름)에게 전달할 것이라고 생각했습니다. 마찬가지로, 학부모는 자녀와 자녀에게 그의 일부를 GrandChild로 전달합니다. 그래서 우리는 계층 구조가 있습니다중첩 된 반응 구성 요소의 상태 변경 다루기
할아버지 -> 부모 -> 아이 - 손자가
그러나, 나는 빨리 내가 방법 this.setState(prevState => (<new state based on prevState>))와 할아버지의 상태를 변경하는 경우, 변경 사항이 채널을 아래로 계단식하지 않는 것을 깨달았다>. 내가 깨달은 또 다른 문제는 채널의 변경 사항도 전달하는 것입니다. 나는 이것을 할 수있는 좋은 방법을 찾지 못했습니다. (이전에는 DOM의 일부 구성 요소에 일부 이벤트를 바인딩하고 ReactComponent 전체에서 액세스 할 수있는 공용 변수를 사용하여 수퍼 스케치를 만들었습니다. 그런 다음 모든 사용자가 특정 이벤트를 트리거하면 해당 이벤트를 업데이트하는 이벤트가 트리거됩니다. 각 구성 요소 ... 긴 이야기 짧게, 이것은 많은 문제를 만들었고 추한 것입니다.)
그럼 부모와 자식으로이 작업을 시도한 예제 코드가 있습니다. 그것은 가짜 예제이지만, 이것을하는 법을 배워야합니다. ReactRandom이라는 부모는 상태가 {name: <name>}이고이 이름을 임의의 문자열로 변경하는 메서드가 있습니다. ReactRandom이 렌더링되면 다른 구성 요소의 이름을 렌더링합니다. ReactRandomNested 기본적으로 자체 소품을 통해 전달 된 이름이 인쇄됩니다. 여기에 ReactRandomNested의 메서드를 명시 적으로 렌더링합니다.이 메서드는 명시 적으로 렌더링하지 않으므로 명시 적으로 수행하지 않고도 업데이트를 캐스케이드 할 수있는 방법이 있다고 생각합니다. 우리는> 2 개의 중첩 된 레벨을 가짐). 그러나 이것조차도 작동하지 않습니다. 1 단계 지연이 있으며 현재 시간 단계에서 이전 업데이트를 렌더링합니다.
어쨌든, 여기에 내가 현재 가지고있는 코드입니다 : 그런데
class RandomReactNested extends React.Component {
constructor(props) {
super(props);
this.state = {name: props.name};
}
handleChange() {
let self = this;
self.setState({name: self.props.name});
}
render() {
let self = this;
return React.createElement("span", {
onClick:() => self.handleChange.call(this)
}, self.state.name);
}
}
class RandomReact extends React.Component {
constructor (props){
super(props);
this.state = {name: props.name};
this.changeName.bind(this);
}
changeName() {
let random_word_length = Math.round(Math.random()*20),
index_count = 0,
new_name = "",
alphabet = "abcdefghijklmnopqrstuvwxyz";
for (index_count; index_count <= random_word_length; index_count += 1) {
new_name += `${alphabet[Math.round(Math.random()*random_word_length)]}`;
}
console.log(new_name);
this.setState(prevState => ({
name: new_name
}));
}
render() {
let self = this;
return React.createElement("div", {
key: 2,
onClick:() => (this.changeName.call(self))
},
React.createElement(RandomReactNested, {
name: self.state.name
}));
}
}
, 나는 반응하는 아주 새로운 오전 효과적으로 사용하는 방법을 배우려고 노력하고 있습니다. ,
"그래서 무엇에 대해 상속 페이스 북에서 : 나는이에 대해 조언을 보인다 페이지 (https://reactjs.org/docs/composition-vs-inheritance.html)의 끝을 향해 ReactJS 웹 사이트에서 이것을보고 (하지만 난 완전히 확실하지 않다?)? 수천 개의 구성 요소에서 React를 사용하며 구성 상속 계층 구조를 만드는 것이 권장되는 사용 사례는 찾을 수 없습니다. 소품 및 구성은 명시 적이며 안전한 방법으로 구성 요소의 모양과 동작을 사용자 지정하는 데 필요한 모든 유연성을 제공합니다. 구성 요소는 기본 값, 반응 요소 또는 함수를 포함하여 임의의 소품을 허용 할 수 있습니다. 구성 요소간에 UI 이외의 기능을 재사용하려면 별도의 JavaScript 모듈로 추출하는 것이 좋습니다 구성 요소는이를 가져 오지 않고 해당 기능, 개체 또는 클래스를 확장하지 않고 사용할 수 있습니다. "
여기에 대한 답변이 나와 있습니다. x) https://stackoverflow.com/questions/46727804/update-a-react-components-state-from-its-parent –