Question

我正在学习React并按照Getting Started指南设置npm，browserify，＆amp; babel。我现在能够从bundle.js文件生成一个main.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>

当然，这不起作用，但希望能够展示我想要完成的任务。有没有人知道做这样的事情的模式？感谢。

Answer 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

Answer 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

使用npm＆amp;时设置React组件初始道具browserify

2 个答案: