React + Foundation - クリックで異なる小道具でモーダルをレンダーする

Question

私はFoundation Modalを組み込むことを試みて、もちろん "Todo"アプリをやっています。 3つのコンポーネント、TodoList.jsx、Todo.jsx、TodoModal.jsxがあります。

私が望むのは、todoの各項目の下に表示され、todoの内容でモーダルをポップアップするリンクです。私の問題：私は、モーダルを起動することができますが、同じモーダルは、クリックするリンク先に関係なくポップアップします。私はTodoModal.jsxの小道具を更新することができず、Reactのコンポーネントライフサイクルかもしれないようですが、先を進めるためには本当に助けが必要です。私はちょうどオンラインのReactコースを受講したので、私はまだ新しいです。どんな助けでも大歓迎です！

以下はTodoList.jsx（TodoModal.jsxとTodo.jsxにtodoデータを送信する）と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コンポーネント。

リアクタンス成分のライフサイクルによれば、componentDidMountは、成分が充填されたときに1回だけと呼ばれます。 componentWillRecievePropsで新しい小道具を取得すると、componentDidMount関数は再呼び出しされないので、あなたのモーダルは新しい小道具を参照していません。

代わりに（できれば）多分あなたは小道具の関連セットに渡すことができますcreateModal(props)機能を経由して、新しい小道具を処理するための両方にcomponentDidMountとcomponentWillReceivePropsをモーダルを作成してみてください。

私はあなたにモーダルを作成する方法の詳細を教えてもらいたいと思いますが、私はFoundation Modalに慣れていないと言っています。

あなたがここにコンポーネントのライフサイクルについての続きを読むことができます：あなたは単にあなたが「の値を変更する必要があなたのTodoModalコンポーネントに新しい小道具を渡すためにあなたのコメント

に応じて更新Component Specs and Lifecycle

をTodoModalコンポーネントのtodoプロパティに渡します。たとえば、CompAというレンダリングされるコンポーネントがあるとします。CompBとCompBには、プロパティitemが必要です。

COMPA

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

しかし、今CompBは、新しいプロパティ値を提供し、componentWillRecieveProps関数を定義することができると言うことができます：CompA年代には、このように見えるかもしれレンダリングします。現在の設定は、CompAのプロパティmyItemが変更された場合にのみ、小道具を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新しく受け取った小道具としてそれを受け取るでしょう。あなたは、クリック、ホバーのような何らかのイベントによってステートの変更を呼び出すことができます。そして、何を求めているのでしょうか？