Question

我正在通过尝试合并Foundation Modal来处理示例“Todo”应用程序。我有三个问题：TodoList.jsx，Todo.jsx和TodoModal.jsx。

我想要的是一个链接，显示在todoList中的每个待办事项下面，以弹出一个带有待办事项内容的模态。我的问题：我可以启动模态，但无论我点击哪个待办事项链接，都会弹出相同的模态。好像我无法更新TodoModal.jsx中的道具，可能是React中的组件生命周期，但我真的需要帮助继续前进。我刚上网了React课程，所以我还是新手。非常感谢任何帮助！

下面是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获取新道具时，componentDidMount函数不会被重新调用，因此您的模态不会引用新道具。

相反，尝试在两者中创建模态（如果可以）componentDidMount和componentWillReceiveProps来处理新的道具，可以通过createModal(props)函数来传递相关集合道具。

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

您可以在此处详细了解组件的生命周期：Component Specs and Lifecycle

更新以回复您的评论

要将新道具传递到TodoModal组件，您只需更改传递给TodoModal组件todo媒体资源的值即可。例如，假设您有一个名为CompA的组件正在呈现CompB而CompB需要一个属性item。 CompA的渲染可能如下所示：

<强> COMPA

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

但现在可以说CompB可以提供新的属性值并定义componentWillRecieveProps函数。如果CompB的属性CompA已更改，则当前设置只会将道具传递给myItem。你可以从技术上做到这一点，但你也可以做以下事情：

<强> 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会将其作为新收到的道具接收。您可以通过某些事件调用状态更改，例如点击，悬停，等等，您应该得到您所询问的内容。

React + Foundation - 使用点击

1 个答案: