aDe*_*Dev 3 javascript reactjs
有没有办法将反应组件作为函数导出并在非反应项目中将道具作为函数的参数传递？
我最近用 create-react-app 完成了一个反应项目。现在我想将它用于其他非反应项目（纯 Javascript + html、Angular 等）。
但是，由于这些项目不能仅使用 React 时尚（组合）中的组件。我想知道我们是否可以将 react 组件导出为函数，这样我们就可以在不同的项目中使用它，而不必担心 react 的架构师。
例如：
export default class MyComponent extends React.Component{
render(){
return(
<div>
{"Hello World" + this.prop.name}
</div>
)
}
}
然后将其导出为函数。所以在非反应项目中，我可以做这样的事情：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Non-React App</title>
</head>
<script src="https://mydisk/ImportMyReact.js" ></script>
<script>
MyComponent("Jake")
</script>
<body>
</body>
</html>
我尝试使用 webpack 来捆绑它，但我没有运气，因为 bundle.js 是一段巨大的代码，我不能只从中导入某些功能。
如果你想创建一个函数来渲染 nonreact 项目中的 react 组件，你可以这样做，但它需要使用 reactDom.render，因为这是获取 react 组件并将其渲染到的唯一方法dom。
React 组件本身不会修改 dom。他们所做的就是创建“虚拟 dom”，这是一组类型和道具，然后 react-dom 可以使用它们来更新 dom。例如，让我们以最简单的组件为例：
() => <div/>
转译 jsx 后，这变成：
() => React.createElement("div", null);
如果你要运行这个函数，结果是一个简单的 javascript 对象，如下所示：
{
$$typeof: Symbol(react.element),
key: null,
props: {},
ref: null,
type: 'div'
}
更复杂的组件将创建更复杂的对象，在类组件的情况下，它们通过其 render 方法创建它，但在所有情况下，结果都只是一个普通对象。创建这个对象时dom没有更新，组件不包含更新dom的逻辑。React-Dom 的工作是获取该对象并弄清楚如何更新 dom。
下面是一个示例，说明如何将函数打包用于呈现 React 组件的非 React 应用程序：
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
// etc
}
export default function renderMyComponent(element, name) {
ReactDOM.render(<MyComponent name={name}>, element);
}
/** somewhere else: **/
renderMyComponent(document.getElementById('main'), 'Jake');
| 归档时间： |
|
| 查看次数： |
2208 次 |
| 最近记录： |