Max*_*s S 8 javascript reactjs
我很好奇在React环境中使用常规javascript库(不是作为React组件编写)的最佳方法是什么.
例如,假设有一个javascript库将一个简单的小部件嵌入到我的网页中.说明如下:
在普通网页中,我会执行以下操作:
<head>
<script src="http://karaoke.com/source.js"></script>
</head>
<body>
<h1>Hello look at my cool widget library</h1>
<karaoke width="600" height="400" />
</body>
如何在这样的React组件中实现相同的效果？
class MainView extends Component {
render() {
return (
<div>
<h1>I want to show my karaoke widget here, but how?</h1>
</div>
);
}
}
JSX的主要目的是感觉像HTML.renderReact组件的主要目的是呈现"假"(虚拟)HTML.如果您的外部窗口小部件也是React组件,则解决方案很简单:
class MainView extends Component {
render() {
return (
<div>
<h1>Hello look at my cool widget library</h1>
<Widget width="600" height="400" />
</div>
);
}
}
所有你必须确保上面的代码在加载小部件脚本后运行(因此Widget组件存在).确切的解决方案取决于您的构建系统.
如果您的外部库不是React组件,则您不能使用自定义widget标记,并且必须呈现实际的HTML.
最大的诀窍是不返回,render但在小部件初始化它需要的东西后手动渲染自己:
class MainView extends Component {
render() {
// don't render anything
return <div/>;
},
componentDidMount() {
// find the DOM node for this component
const node = ReactDOM.findDOMNode(this);
// widget does stuff
$(node).activateMyCoolWidget();
// start a new React render tree with widget node
ReactDOM.render(<div>{this.props.children}</div>, node);
}
});
有关详细信息,请查看门户网站.
| 归档时间： |
|
| 查看次数： |
7642 次 |
| 最近记录： |