README

这是一个 Yii2 小部件，允许在您的 Yii2 应用程序中使用 ReactJS 组件，并提供服务器端渲染的选项。

安装

此小部件需要 v8js PHP 扩展。如何设置 V8Js PHP 扩展？请使用下面的链接

• 在 Linux 上
• 在 MacOs 上
• 在 Windows 上

Composer

将您的 composer.json 中的 minimum-stability 设置为 dev 2。此小部件使用 browserify 和 uglify-js 从 npm 的 react 和 react-dom 包编译 react 包，但是，由于 composer 仅在根 composer.json 中运行脚本，因此需要将以下行添加到您的 composer.json 中

... 
"scripts": {
"regenerate_react_bundle": [
   "vendor/b-tokman/yii2-react/build-bundles.sh"
],
"post-install-cmd":[
   "@regenerate_react_bundle",
],
"post-update-cmd": [
   "@regenerate_react_bundle",
]
...

这种方式，composer 将运行 browserify 来创建 react-bundle.js，并使用 uglifyjs 来压缩它，每次升级或安装后都会进行

1. 然后运行

  $ composer require vishu-b/yii2-react

Composer 将下载包含所有依赖项的 yii2-react 包，然后 npm 将下载 react 和 react-dom npm 包，并运行脚本来编译它。

用法

安装完成后，您将能够在应用程序中使用 vishuB\react\widgets\ReactRenderer 小部件。

ReactRenderer::widget([
    'componentsSourceJs' => <pathToYourComponentJsFile>,
    'component' => <componentName>,
    'props' => [props],
    'options' => [options],
    'useTranspiler' => true //or false
])

• componentsSourceJs - 您的 react 组件 js 文件的路径
• component - 包含您的 React 组件的全局变量名称，您也可以通过点表示法使用 命名空间组件
• props - 将传递给您的组件的 props 数组

• options - 您可以向小部件传递的选项数组
  • prerender - 告诉小部件在服务器端渲染您的组件，默认为 true
  • tag - 将组件传递到的元素的标签
  • HTML 属性 - 将添加到组件包装元素的 HTML 属性。例如：'id' => 'root'。
• useTranspiler - 布尔值，是否使用 bable 转换 js 代码。如果您没有 JSX 或其他特定语法，请不要使用转换器，以节省时间

您所有的 ReactJs 组件都必须在 window 范围内。

示例

在您的视图文件中

echo ReactRenderer::widget([
    'componentsSourceJs' => 'js/main.js',
    'component' => 'Main',
    'props' => [ 'title' => 'Hello' ],
]);

示例 main.js

class Main extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "main",
            null,
            React.createElement("div", null, title)
        );
    }
}
window.Main = Main;

命名空间组件

echo ReactRenderer::widget([
      'componentsSourceJs' => 'js/layout.js',
      'component' => 'Layout.Header',
      'props' => ['title' => 'Hello'],
]);

示例 layout.js

class Header extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "header",
            null,
            React.createElement("div", null, title)
        );
    }
}
class Layout extends React.Component {
    render() {
        return React.createElement(
            "div",
            null,
            React.createElement(Layout.Header, {title: this.props.title})
        );
    }
}
Layout.Header = Header;
window.Header = Header;