2016-06-22 8 views
0

Ich arbeite natürlich von Beispiel "Todo" App durch den Versuch, Foundation Modal zu integrieren. Ich habe drei Komponenten in Frage: TodoList.jsx, Todo.jsx und TodoModal.jsx.React + Foundation - Render Modal mit verschiedenen Requisiten auf Klick

Was ich will, ist ein Link, der unter jedem Todo in TodoList auftaucht, um ein Modal mit todo Inhalten zu popup. Mein Problem: Ich kann das Modal starten, aber das gleiche Modal erscheint unabhängig davon, auf welchen Todo-Link ich klicke. Es scheint, als wäre ich nicht in der Lage, die Requisiten in TodoModal.jsx zu aktualisieren und kann den Lebenszyklus der Komponenten in React sein, aber ich brauche wirklich Hilfe, um voranzukommen. Ich habe gerade einen Online-React-Kurs gemacht, also bin ich noch neu. Jede Hilfe wird sehr geschätzt!

Unten sind TodoList.jsx (die Todo-Daten an TodoModal.jsx und Todo.jsx sendet) und 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; 

Antwort

1

Ich bin nicht vertraut mit Foundation Modal aber ich glaube, das Problem mit, wenn Sie die Einrichtung der modalMarkup Komponente.

Gemäß dem Lebenszyklus von React-Komponenten wird componentDidMount nur einmal aufgerufen, wenn die Komponente geladen ist. Wenn Sie neue Requisiten über componentWillRecieveProps erhalten, wird die componentDidMount Funktion NICHT erneut aufgerufen und daher verweist Ihr Modal nicht auf die neuen Requisiten.

Stattdessen versuchen die modalen sowohl zu erstellen (wenn Sie kann) componentDidMount und componentWillReceiveProps die neuen Requisiten zu handhaben, vielleicht über eine createModal(props) Funktion, die Sie in dem jeweiligen Satz von Requisiten passieren können.

Ich wünschte, ich könnte Ihnen mehr Informationen darüber geben, wie man das Modal erstellt, aber wie gesagt, ich bin nicht vertraut mit Foundation Modal.

Sie können mehr über die lifecyle der Komponenten lesen Sie hier: Component Specs and Lifecycle

in Reaktion auf Ihren Kommentar Aktualisiert

Um neue Requisiten, um Ihre TodoModal Komponente zu übergeben müssen Sie einfach den Wert ändern Sie‘ Weiter zu der TodoModal Komponente todo Eigenschaft. Angenommen, Sie haben eine Komponente mit dem Namen CompA, die CompB und CompB eine Eigenschaft item erfordert. CompA ‚s machen kann wie folgt aussehen:

CompA

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

Aber jetzt kann sagen, dass CompB neue Eigenschaftswerte zur Verfügung gestellt werden kann und definiert die componentWillRecieveProps Funktion. Das aktuelle Setup würde NUR eine Requisite an CompB übergeben, wenn die CompA Eigenschaft myItem geändert wurde.Man könnte dies technisch tun, aber man könnte auch so etwas wie die folgenden tun:

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}/>); 
} 

Jetzt in diesem Fall ändern CompA ‚s Zustand wird der neue Wert zu übergeben CompB und dann CompB würde es als neu erhaltene Requisiten erhalten. Sie können festlegen, dass die Statusänderung von einem Ereignis wie einem Klick, einem Hover oder was auch immer ausgelöst wird, und Sie sollten das haben, wonach Sie gefragt haben.

+0

Danke @Fizz! Dies ist hilfreich und auf dem richtigen Weg zu dem, was ich tun möchte. Kann ich, abgesehen von Foundation-Anteilen, näher erläutern, wie ich Requisiten senden kann, nachdem ich auf einen Link zu TodoModal.jsx geklickt habe? Ich habe 'componentWillReceiveProps' hinzugefügt, aber ich habe Probleme, Requisiten zu erhalten. – jbro

+0

Vielen Dank für die Klarstellung, @ Fizz. Ich habe deinen Vorschlag benutzt, zusammen mit einer "showModal" Flagge, die ich mit dem Status verfolgen würde. – jbro