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;
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
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