我有一个带有 React 的 Meteor 应用程序,其中有一个名为ChatManager
. 该组件导入我的chatrooms.js
API 以发布我的chatrooms
收藏。它还导入我的EditChatRoom
组件和我的ChatRoomRecord
组件。
基本上这里总结一下相关代码的文件结构:
-imports
-api
-chatrooms.js
-ui
-chatmanager
-ChatRoomRecord.jsx
-EditChatRoom.jsx
ChatManager.jsx
我的ChatRoomRecord
组件有一个onClick
功能可以成功记录点击和chatroom
道具。
我EditChatRoom
的modal
地方id="editChatRoomModal"
ChatManager
组件是同时包含组件ChatRoomRecord
和组件的EditChatRoom
组件。
如何将chatroom
我注册的道具发送到EditChatRoom
组件?在旁注中,我如何打开editChatRoomModal
使用 React?
非常感谢您的帮助!谢谢!
编辑: 添加信息
这是我的ChatManager
组件的基本表示:
class ChatManager extends Component {
renderChatRoomRecords() {
return this.props.chatrooms.map((chatroom) => (
<ChatRoomRecord key={chatrooom._id} chatroom={chatroom} />
))
}
render() {
return (
<div>
<EditChatRoom />
<table>
<tbody>
{this.renderChatRoomRecords()}
</tbody>
</table>
</div>
)
}
}
ChatManager.PropTypes = {
chatrooms: PropTypes.array.isRequired
}
export default createContainer(() => {
Meteor.subscribe('chatrooms')
return { chatrooms: ChatRooms.find({}).fetch() }
}, ChatManager)
然后这是我的ChatRoomRecord
组件:
export class ChatRoomRecord extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(event) {
event.preventDefault()
console.log("Click registered successfully: " + this.props.chatroom._id)
}
render() {
return (
<tr onClick{this.handleClick}>
{/* This code isn't relevant to the problem */}
</tr>
)
}
}
ChatRoomRecord.PropTypes = {
chatroom: PropTypes.object.isRequired
}
这很好用,所以映射没有问题,点击事件在它注册点击并显示chatroom._id
被点击的地方工作。
这是我的EditChatRoom
组件:
export class EditChatRoom extends Component {
render() {
return (
<div className="modal fade" id="editChatRoomModal" tabIndex="-1" role="dialog">
{/* This code isn't relevant to the problem */}
</div>
)
}
}
我需要打开这个模式并通过在我的组件chatroom
中单击的那个。ChatRoomRecord
希望这能更好地解释问题。