0

「モーダルウィンドウ」でReactjs + React-motionプロジェクトに取り組んでいます（たとえば）可能であれば、コンポーネントを動的にマウントまたはロードしたいですか？

これまでの私の解決策：方法が見つからなかったので、コンポーネントを配置して非表示にし、状態の変化時にクラスまたはスタイルを切り替えて、非表示のコンポーネントを明らかにし、「モーダルウィンドウ」の遷移が完了します。

以下のコードを共有すると、私がやろうとしていることを理解しやすくなります。イベント ハンドラーはなく、ほとんどのコードが削除されましたが、onRest(アニメーションが終了したときのイベント コールバックが公開されています) とレンダリング fn.

class HomeBlock extends React.Component {

    constructor (props) {
        ...

    }

    ...

    motionStyleFromTo () {

        return {
            ...
        };

    }

    onRest () {

        // this is triggered when the Motion finishes the transition

    }

    render () {

        return (
            <Motion onRest={this.onRestCallback.bind(this)} style={this.motionStyleFromTo()}>
                {style =>
                    <div className="content" style={{
                        width: `${style.width}px`,
                        height: `${style.height}px`,
                        top: `${style.top}px`,
                        left: `${style.left}px`
                        }}>
                        [LOAD COMPONENT HERE]
                    </div>
                }
            </Motion>
        );

    }

}

export default HomeBlock;
4

2 に答える 2

3

これは非常に簡単に実現できます。この例では、小道具に基づいてコンポーネントを動的にレンダリングしています。

class MyComponent extends React.Component {
  propTypes: {
    display: React.PropTypes.bool
  },
  render() {
    return (
       <div>
         {this.props.display ? <ChildComponent /> : null}
       </div>
    )
  }
}

あなたの場合、内部コンポーネントの状態を使用してコンポーネントをマウントまたはアンマウントすることができます。

参考までに、コンポーネントを破棄するのではなく、スタイルを使用してコンポーネントを非表示にすることを好む場合や、スタイルを使用する必要がある場合があります。これについては、React のドキュメントで詳しく説明しています。こちらの「ステートフルな子」セクションを参照してください: https://facebook.github.io/react/docs/multiple-components.html

于 2016-04-29T15:12:29.220 に答える
1

依存性注入と依存性コンテナーの概念を使用してそれを行うことができます。この要点ページでサンプルコードを提供しました

https://gist.github.com/SamanShafigh/a0fbc2483e75dc4d6f82ca534a6174d4

D1、D2、D3 という 4 つのコンポーネントがあるとします。必要なのは、依存性注入と依存性コンテナー メカニズムを作成することです。これは非常に単純な実装です

コンポーネントを定義するこのような構成ファイルがあると想像してください

export default [
  {
    name:'D1',
    path:'D1'
  },
  {
    name:'D2',
    path:'D2'
  },
  {
    name:'D3',
    path:'D3'
}];

次に、このようなコンポーネントコンテナを持つことができます

import componentsConfig from 'ComponentsConfig';

let components = {};

for (var i = 0; i < componentsConfig.length; i++) {
  let componentConfig = componentsConfig[i];
  // Check if component is not already loaded then load it
  if (components[componentConfig.name] === undefined) {
    components[componentConfig.name] = require(`${componentConfig.path}`).default;
  }
}

export default components;

最後に、コンポーネントをロードしたい場所で、コンポーネントコンテナを使用してコンポーネントを動的にロードするか、つまりコンポーネントを注入できます 

import React, { Component } from 'react';
import ComponentContainer from './ComponentContainer';

class App extends Component {
  render() {
    let components = ['D1', 'D2', 'D3'];

    return (
      <div>
        <h2>Dynamic Components Loading</h2>
        {components.map((componentId) => {
          let Component = ComponentContainer[componentId];
          return <Component>{componentId}</Component>;
        })}
      </div>
    );
  }
}

export default App;
于 2017-09-13T04:21:47.573 に答える