如何动态的注册model

[clssw1004]

import React from "react";
import DemoList from "./DemoList";
import { Tabs } from "antd";
import mirror, { connect, actions, Route, Link } from "mirrorx";
const TabPane = Tabs.TabPane;
const createModel = function() {
	let name = 'test' + parseInt(Math.random() * 10000) + ''
	mirror.model({
		name: name,
		initialState: {
			value: name
		}
    });
    console.log(name)
	return name;
};
mirror.model({
	name: "demoaa",
	initialState: {
		tabs: []
	},
	reducers: {
		addTab(state, data) {
            let name = createModel();
            let t = [].concat(state.tabs, [{ tab: (<Test value={name} />), key: name }])
            console.log(t)
			return {
				...state,
				tabs: t
			};
		}
	}
});
const Test = (() => {
	return connect(state => {
        console.log(state);
		return state;
	})(props => {
		{
            console.log(props)
			return (<div>{props[props.value].value}</div>)
		}
	});
})();

const DemoIndex = (() => {
	return connect(state => {
		return state.demoaa;
	})(props => {
		{
			return (
				<div>
					<button
						onClick={() => {
							actions.demoaa.addTab()}
						}
					>
                    添加标签
					</button>
					<Tabs type="card">{props.tabs.map((item) => (<TabPane tab={item.key} key={item.key}>{item.tab}</TabPane>))}</Tabs>
				</div>
			)
		}
	})
})()

export default DemoIndex;

我希望通过动态的注册model，将Test控件绑定不同的数据，当然这个demo里面数据很简单，我们在项目中通过打开多个Tab里面会使用同一个component显示不同数据（例如不同的详情、新增），这时如果Test返回相同的state.xx的话会导致多个tab内component数据相同；或者是有其它什么解决方案么？

[llh911001]

建议先把示例代码格式化一下哈 ：）

另外，你的 DemoIndex 是如何使用 Test 的呢？

[clssw1004]

@llh911001 代码是格式化过的。。
https://github.com/hulala1021/demo/blob/master/DemoIndex.js
通过点击以下button动态添加一个tab
<button onClick={() => {actions.demoaa.addTab();}}>添加标签</button>

这个是添加tab的reduce

addTab(state, data) {
	let name = createModel();
	let t = [].concat(state.tabs, [{ tab: <Test value={name} />, key: name }]);
	console.log(t);
	return {
		...state,
		tabs: t
	};
}

动态的创建model

const createModel = function() {
	let name = "test" + parseInt(Math.random() * 10000) + "";
	mirror.model({
		name: name,
		initialState: {
			value: name
		}
	});
	console.log(name);
	return name;
};

在Test中根据动用台生成的model name 进行渲染

const Test = (() => {
	return connect(state => {
		console.log(state);
		return state;
	})(props => {
		{
			console.log(props);
			return <div>{props[props.value].value}</div>;
		}
	});
})();

DemoIndex渲染Tabs

<Tabs type="card">
	{props.tabs.map(item => (
		<TabPane tab={item.key} key={item.key}>
			{item.tab}
		</TabPane>
	))}
</Tabs>

[llh911001]

大概理解你的意思了。

是这样的，你的 createModel 方法，每次调用后，只是“动态创建了一个 model”；并没有真正将此次创建的 model 更新到 redux store 当中去。

如果需要此动态创建的 model 生效，需要手动调用一次 mirror.render 方法，这个方法会调用 redux 的 replaceReducer 方法。

具体可参看这里的文档。

[clssw1004]

@llh911001 谢谢！问题已解决。