javascript - React + Foundation - 单击时使用不同的 Prop 渲染模态

Question

我正在通过尝试合并 Foundation Modal 来完成示例“Todo”应用程序。我有三个有问题的组件:TodoList.jsx、Todo.jsx 和 TodoModal.jsx。

我想要的是一个链接，显示在 todoList 中的每个待办事项下方，以弹出包含待办事项内容的模式。我的问题:我可以启动模态框，但无论我单击哪个待办事项链接，都会弹出相同的模态框。看来我无法更新 TodoModal.jsx 中的 props，并且可能是 React 中的组件生命周期，但我确实需要帮助继续前进。我刚刚参加了在线 React 类(class)，所以我还是个新手。非常感谢任何帮助!

下面是TodoList.jsx(它将待办事项数据发送到TodoModal.jsx和Todo.jsx)和TodoModal.jsx。

TodoList.jsx

var React = require('react');
var {connect} = require('react-redux');
import Todo from 'Todo';
var TodoAPI = require('TodoAPI');

import TodoModal from 'TodoModal';

export var TodoList = React.createClass({
    render: function () {
      var {todos, showCompleted, searchText} = this.props;
      var renderTodos = () => {
      var filteredTodos = TodoAPI.filterTodos(todos, showCompleted, searchText);

      if (filteredTodos.length === 0) {
        return (  <p className="container__message">Nothing To Do</p>  );
      }

      return filteredTodos.map((todo) => {
        return (
          <div>
            <Todo key={todo.id} {...todo}/>
            <div>
              <a data-open="item-modal">
                  {todo.id}
              </a>
            <TodoModal todo={todo}/>
            </div>
          </div>
        );
      });
    };

    return (
      <div>
        {renderTodos()}
      </div>
    )
  }
});    
export default connect((state) => {return state })(TodoList);

TodoModal.jsx:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactDOMServer = require('react-dom/server');

var TodoModal = React.createClass({
  componentDidMount: function () {
    var modalMarkup = (
      <div id="item-modal" className="reveal tiny text-center" data-reveal="">
        <h4>{this.props.todo.text}</h4>
        <p>{this.props.todo.id}</p>
        <p>
          <button className="button hollow" data-close="">
            Okay
          </button>
        </p>
      </div>
    );

    var $modal = $(ReactDOMServer.renderToString(modalMarkup));
    $(ReactDOM.findDOMNode(this)).html($modal);
    var modal = new Foundation.Reveal($("#item-modal"));
  },

  componentWillReceiveProps: function (newProps) {
    console.log(newProps)
  },

  render: function () {  
    return (<div> </div>);
  }
});
module.exports = TodoModal;

Answer 1

我不熟悉 Foundation Modal，但我相信问题出在您设置 modalMarkup 组件时。

根据React组件的生命周期，componentDidMount仅在组件加载时被调用一次。当您通过 componentWillRecieveProps 获取新的 props 时，componentDidMount 函数不会重新调用，因此您的模态不会引用新的 props。

相反，尝试在(如果可以的话)componentDidMount 和 componentWillReceiveProps 中创建模式来处理新的 props，也许通过 createModal(props) 函数，您可以传入相关的 Prop 集。

我希望能为您提供有关如何创建模式的更多信息，但正如我所说，我不熟悉Foundation Modal。

您可以在此处阅读有关组件生命周期的更多信息:Component Specs and Lifecycle

已更新以回复您的评论

要将新的 props 传递给 TodoModal 组件，您只需更改传递给 TodoModal 组件的 todo 属性的值。例如，假设您有一个名为 CompA 的组件，它正在渲染 CompB，并且 CompB 需要属性 item。 CompA 的渲染可能如下所示:

CompA

render: function () {
    return (<CompB item={this.props.myItem}/>);
}

但是现在假设可以为 CompB 提供新的属性值并定义 componentWillRecieveProps 函数。如果 CompA 的属性 myItem 发生更改，当前设置只会将 prop 传递给 CompB。从技术上讲，您可以做到这一点，但您也可以执行如下操作:

CompA

getInitialState: function () {
    return {
        item: this.props.myItem
    };
},

render: function() {
    // Use the state as the value for CompB's property
    // Then changing the state will invoke CompB's componentWillReceiveProps function
    return (<CompB item={this.state.item}/>);
}

现在，在这种情况下，更改 CompA 的状态会将新值传递给 CompB，然后 CompB 会将其作为新收到的 Prop 。您可以通过某些事件(例如单击、悬停等)来调用状态更改，并且您应该得到您所询问的内容。