假设我有 2 个不同的 DOM 元素
<div id="firstDiv">
</div>
<div id="secondDiv">
</div>
现在假设我使用
在 firstDiv 中呈现一些 htmlReact.render(firstComponent(null),document.getElementById('firstDiv');
现在假设我从 firstComponent 中的服务器获取一些数据,然后我必须在 secondDiv 中呈现部分数据,最好的方法是什么? ?我可以从 firstComponent 内部调用 React.renderComponent(,document.getElementById("secondDiv")) 吗?以及如何实现它们之间的双向通信???假设现在我单击 secondDiv 中呈现的 html 中的链接,然后如何更改 firstDiv 中的文本??
如果我概括这个问题,它将是“我如何从一个组件在多个 DOM 元素中呈现 html,然后在这些呈现在不同 DOM 元素中的组件之间进行通信???”
最佳答案
这可以通过常规 parent-child communication 来实现,除非在这种情况下你没有任何 parent 。
但是您仍然可以将一些将在 2 个组件内部调用并触发渲染的函数传递给根组件
这是您提出的示例的工作演示:
var First = React.createClass({
render: function() {
return <div>Hello1 {this.props.name}</div>;
}
});
var Second = React.createClass({
render: function() {
return <div onClick={this.props.onSecondClicked}>Hello2 {this.props.name}</div>;
}
});
function onSecondClicked() {
React.render(<First name="World updated!" />, document.getElementById("first"));
}
React.render(<First name="World" />, document.getElementById("first"));
React.render(<Second name="World" onSecondClicked={onSecondClicked}/>, document.getElementById("second"));
在第二个组件内调用 React.render
应该正常工作(也许在渲染阶段不会,但这无论如何都不是一个好主意)。但是,它会在您的 2 个组件之间产生巨大的耦合。
您还可以创建一个“根组件”,作为这两个组件的父组件。
如果您有很多组件需要同步,您可以使用事件总线进行跨组件通信。
关于javascript - 在reactjs中没有父子关系的不同组件之间进行通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26646991/