在两个同级React.js组件之间传递数据
Passing data between two sibling React.js components
我在一个页面上有两个组件(搜索字段)的实例,它们之间有第二个组件(进行服务器调用的按钮),例如:
ReactDOM.render(
<table>
<tbody>
<tr>
<td><CardSearch items={ cards } placeholder="Card 1 here" /></td>
<td><RunOnServer url="py/comparecards" /></td>
<td><CardSearch items={ cards } placeholder="Card 2 here"/></td>
</tr>
</tbody>
</table>,
document.getElementById('root')
);
我只想从CardSearch字段向RunOnServer按钮传递一个未修改的参数,但如果这很容易,我会被诅咒的。根据这一点,我可以使用this.state.var作为道具,但在编译代码时,这样做会给我带来"undefined.state.var"。React的官方文档并不好;他们只是告诉我自己去Flux,这似乎很愚蠢。。。我不需要一个全新的体系结构来将一个简单的变量从一个组件传递到另一个组件。
我还尝试在进行渲染的文件中制作本地变量,但它们会作为道具传递给组件,并且不能修改组件中的道具。
我创建了一个jsfiddle,并举例说明如何使用父组件在两个组件之间共享变量。
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {shared_var: "init"};
}
updateShared(shared_value) {
this.setState({shared_var: shared_value});
}
render() {
return (
<div>
<CardSearch shared_var={this.state.shared_var} updateShared={this.updateShared} />
<RunOnServer shared_var={this.state.shared_var} updateShared={this.updateShared} />
<div> The shared value is {this.state.shared_var} </div>
</div>
);
}
}
class CardSearch extends React.Component {
updateShared() {
this.props.updateShared('card');
}
render() {
return (
<button onClick={this.updateShared} style={this.props.shared_var == 'card' ? {backgroundColor: "green"} : null} >
card
</button>
);
}
}
class RunOnServer extends React.Component {
updateShared() {
this.props.updateShared('run');
}
render() {
return (
<button onClick={this.updateShared} style={this.props.shared_var == 'run' ? {backgroundColor: "green"} : null}>
run
</button>
);
}
}
ReactDOM.render(
<Parent/>,
document.getElementById('container')
);
截至2020年2月;Context API
是处理此问题的方法:
// First you need to create the TodoContext
// Todo.jsx
//...
export default () => {
return(
<>
<TodoContextProvider>
<TodoList />
<TodoCalendar />
</TodoContextProvider>
</>
)
}
// Now in your TodoList.jsx and TodoCalendar.jsx; you can access the TodoContext with:
//...
const todoContext = React.useContext(TodoContext);
console.log(todoContext)
//...
//...
查看这个视频教程由网络忍者挂钩&上下文API
祝你好运。。。
相关文章:
- 如何创建带有插槽的vue js组件预加载程序
- 如何在react js中将值从一个组件发送到另一个组件
- 如何在react js中移动第二个组件
- React js更改状态不会更新组件
- ember-js组件初始化不同的函数
- 复选框保持React JS中各组件的状态
- 如何在cycle js中从JSON数组创建组件
- Vue.js获取组件中的一个元素
- Ember.js(v2.4.5)组件不是't错过第二个动作
- 将自定义脚本加载到Vue.js组件中
- Ember.js:接受的子组件和父组件之间通信的最佳实践
- 使用react.js渲染其他组件内部的组件
- React.js不区分同一类的两个组件
- Ember.js:未在组件'中渲染的模型的计算属性;关于变更的参考
- 如何忽略node.js中其他文件或组件所需的文件
- React.js简单组件组成问题
- 在多个react.js组件中呈现json数据
- 以最封装的方式封装/封装ScalaJS react js组件(react stick)
- 需要来自单个JS文件的多个子模块与节点/组件.js
- 在组件.js内加载客户 sapui5 库