组件嘛,如果可以保存进数据库…
直接上代码~ 下方有 demo
// Utils
function convertComponentToString(component) {
return String(component)
}
function convertStringToComponent(string_component) {
return new Function('tmp', '', 'return ' + string_component)()
}
// Demo time
// 假设我们有一个 Timer 组件
class Timer extends React.Component {
constructor(props) {
super(props)
this.state = {
timer: 0
}
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({timer: this.state.timer+1})
}, 1000)
}
render() {
return (
<div onClick={this.simpleBehavior}>
<div>Hello world {this.state.timer}</div>
</div>
)
}
simpleBehavior(){
alert(233)
}
componentWillUnmount() {
clearInterval(this.timer)
}
}
// 将 Timer 转化为字符串(可以存进数据库)
const timer_str = convertComponentToString(Timer)
// 将转化的组件字符串再转为组件
const TimerComponent = convertStringToComponent(timer_str)
// 使用
ReactDOM.render(
<TimerComponent />,
document.getElementById('container')
);
Demo: jsbin