React + Meteor + Bootstrap 模态管理数据

Question

我有一个带有 React 的 Meteor 应用程序，其中有一个名为 ChatManager 的组件。该组件导入我的 chatrooms.js API 以发布我的 chatrooms collection。它还导入我的 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 组件？另外，我如何使用 React 打开 editChatRoomModal？

非常感谢您的帮助！谢谢！

编辑： 添加信息

这是我的 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>
        )
    }
}

我需要打开此模式并通过在我的 ChatRoomRecord 组件中单击的 chatroom。

希望这能更好地解释问题。

Answer 1

您可以简单地使用 Session 来显示所选记录和模式状态（显示或隐藏）：

ChatRoomRecord.jsx

export class ChatRoomRecord extends Component {
    // ...

    handleClick(event) {
        event.preventDefault()
        Session.set('selectedRecordId', this.props.chatroom._id);
        Session.set('isShowModal', true);
    }

    // ...
}

EditChatRoom.jsx

class EditChatRoom extends Component {
  render() {
    const {
      selectedRecordId
    } = this.props;

    return (
      <div className="modal fade" id="editChatRoomModal" tabIndex="-1" role="dialog">
        {/* use the selectedRecordId */}
      </div>
    )
  }
}

export default createContainer(() => {

  // show modal if isShowModal is true
  if (Session.get('isShowModal')) {
    $('#editChatRoomModal').show();
  } else {
    $('#editChatRoomModal').hide();
  }

  return {
    selectedRecordId: Session.get('selectedRecordId'),
  };
}, EditChatRoom)

此代码有效，但它只是为了演示如何解决您的问题。我建议你使用 react-bootstrap instead of the normal Bootstrap. And use another reactive source (ReactiveVar or ReactiveDict) 来存储反应值而不是 Session，因为 Session 具有全局范围所以很容易搞砸

React + Meteor + Bootstrap 模态管理数据

React + Meteor + Bootstrap Modal managing data

javascript

twitter-bootstrap

meteor

reactjs

meteor-1.4