我的结构是这样的：
<ParentComponent />
<Child 1 /> <Child 2 />
我在<Child 1 />. 由于<Child 1 />控制网格布局，并且<Child 2 />是一个带按钮的导航栏，我想要一个按钮，<Child 2 />可以在其中重置<Child 1 />.
我如何实现这一目标？据我所知，refs只能往树上“一步”走，不能往下走。
没有任何明显的方法可以从parent组件调用此函数。这里有什么办法吗？我能想到的所有解决方案都没有真正遵循 React 思维模式，即单向数据流。
您可以将父组件作为两个组件的容器。所以所有的状态和函数都在父组件中处理，并将它们作为props传递给其他组件。
例如
class Parent extends React.Component {
constructor() {
super();
this.state = {
controls: controls
}
}
onClick = (dataFromChild2) => {
//Resetting
this.setState({controls: dataFromChild2})
}
render() {
return (
<div>
<Child1 gridControl={this.state.controls}/>
<Child2 onClick={this.onClick}/>
</div>
)
}
}
您可以在子组件中访问gridControl和onClickfromthis.props
更新
这样想，您拥有具有处理数据所需的状态和功能的父组件。子组件获取这些数据并相应地更新它们的状态。
假设父组件是这样的：
class Parent extends React.Component {
constructor() {
super();
this.state = {
gridControl: {}
}
}
onChild2ButtonClick = (dataFromChild2) => {
this.setState({
gridControl: dataFromChild2
});
};
render() {
return (
<div>
<Child1 controls={this.state.gridControl}/>
<Child2 onClick={this.onChild2ButtonClick}/>
</div>
);
}
}
Child2 组件是这样的：
class Child2 extends React.Component {
constructor() {
super();
}
onClick = () => {
var data = {};
this.props.onClick(data);
};
render() {
return (
<div>
<button onClick={this.onClick}/>
</div>
);
}
如果您正在为 Child1 使用状态，并且不想将它们更改为具有 Parent 组件中的函数的 props 来处理它们，那么您可以componentWillReceiveProps使用从父组件接收到的新 props更新方法中的状态，以便发送的props将匹配 Child1 组件中使用的状态。
希望这能解决问题。
如果您的结构如下所示：
<ParentComponent>
<div>
<Child1 />
<Child2 />
</div>
<ParentComponent />
双方Child1并Child2应“沟通”通过ParentComponent。
如果Child2将通知ParentComponent按钮单击事件，则它可以Child1相应地使用适当的props重新渲染或触发一个函数，该函数Child1以prop. 这是一个基本的流程react.js
作为一个例子，考虑一个House有一个Button和一个Door子组件的组件。在Button将切换开闭幕Door。
class House extends Component {
constructor(props) {
super(props);
this.state = {
isOpened: props.isOpened,
};
this.toggleOpenDoor = this.toggleOpenDoor.bind(this);
}
toggleOpenDoor() {
this.setState({
isOpened: !this.state.isOpened
});
}
render() {
return (
<div>
<Button onClick={this.toggleOpenDoor} />
<Door isOpened={this.state.isOpened} />
</div >
);
}
}
House.propTypes = {
isOpened: React.PropTypes.bool
};
House.defaultProps = {
isOpened: true
};
export default House;
在每次更改时this.state.isOpened，Door将使用新值作为props重新渲染
方法 1：
为此，您需要维护一个商店。单击<Child2 />组件中的按钮更新商店中的变量。读取存储中的更新变量，以及它是否在您的<Child1 />组件中更改了更新值。您可以使用flux、redux、mobx 等作为商店选择，但我想说您可以从redux 开始。
方法二：
如果您不想使用商店，请在您的<Parent />按钮中保留一个状态，然后单击按钮<Child2 />通过回调函数更新您在父级中的状态。将此状态值作为props传递给<Child1 />并在props存在时进行更改。