使用 npm 和 browserify 时设置 React 组件初始属性答案

【问题标题】：Setting React component initial props when using npm & browserify使用 npm 和 browserify 时设置 React 组件初始属性
【发布时间】：2016-04-05 08:02:41
【问题描述】：

我正在学习React，并已按照Getting Started 指南设置npm、browserify 和babel。我现在可以从我的 main.js 文件中生成一个 bundle.js 文件，我可以将其包含在 HTML 页面中以呈现我的反应组件。到目前为止一切顺利。

我不知道如何将index.html 文件中的初始值传递到bundle.js 中定义的组件中。我知道这是一个变量范围问题，因为 ReactDOM 并且组件不是全局的。

让我举个例子。在bundle.js 中说我有一个名为Profile 的 React 组件，它为给定的用户名生成一个小的配置文件小部件。我不想硬编码main.js/bundle.js 中的用户名值（似乎很多例子都这样做）。我希望这是动态的，并且可以在 HTML 页面中进行更改。所以在我的index.html 页面中，我想做如下的事情：

<body>
    <div id="profile"></div>
    <script src="bundle.js"></script>
    <script>
        ReactDOM.render(
            <Profile user="bob" />, 
            document.getElementById('profile')
        );
    </script>
</body>

这当然行不通，但希望能证明我想要完成的工作。有谁知道做这样的事情的模式？谢谢。

【问题讨论】：

标签： javascript reactjs browserify

【解决方案1】：

在这种情况下，您需要使用纯 Javascript 来创建元素，而不是 JSX。

<script>
var props = {
  user: "bob",
};

// or you can even serialize data structure of your choice
// var props = <?php echo json_encode($profile); ?>;

ReactDOM.render(
    React.createElement(Profile, props),
    document.getElementById('profile')
);
</script>

由于 Webpack 将捆绑 React/ReactDOM，您将无法在全局范围内访问它。为避免这种情况，请为 Webpack 安装 expose-loader。 https://www.npmjs.com/package/expose-loader

// index.js may look like this then
require("expose?React!react");
require("expose?ReactDOM!react-dom");
require("expose?Profile!./Profile");
// ./Profile is Profile.js containing component code

【讨论】：

我试过这个，但是得到一个 JavaScript 错误，ReactDOM 没有定义。看来我的bundle.js 将其变量保持在本地。将React、ReactDOM 和我的组件显式设置为全局变量会是不好的做法吗？例如，window.React = require('react');、window.MyComponent = React.createClass({...});

【解决方案2】：

您可以访问 dom 元素上的属性 user 并将其传递给组件，

这是一个没有 jsx 的例子：

const profEl=  document.getElementById('profile')

const Profile = React.createClass({
  displayName: 'Profile',
  render: function() {
    return (
      React.createElement('div', {
          className: "prof"
        },
       profEl.attributes.user.value , ' is the name'
      )
    );
  }
});
ReactDOM.render(
  React.createElement(Profile, null),
  profEl
);

fiddle

【讨论】：