Javascript 使用npm&；时设置React组件初始道具；粗制滥造_Javascript_Reactjs_Browserify

Javascript 使用npm&；时设置React组件初始道具；粗制滥造

javascript reactjs

Javascript 使用npm&；时设置React组件初始道具；粗制滥造,javascript,reactjs,browserify,Javascript,Reactjs,Browserify,我正在学习并遵循了《设置指南》npm，browserify，&babel。我现在可以从我的main.js文件中生成一个bundle.js文件，我可以将它包含在HTML页面中以呈现我的组件。到目前为止还不错我不知道如何将index.html文件中的初始值传递到bundle.js中定义的组件中。我知道这是一个变量范围问题，因为ReactDOM和组件不是全局的让我举个例子。比如在bundle.js中，我有一个名为Profile的React组件，它为给定的用户名生成一个小的Profile小部件。我不

我正在学习并遵循了《设置指南》

npm

，

browserify

，&

babel

。我现在可以从我的

main.js

文件中生成一个

bundle.js

文件，我可以将它包含在HTML页面中以呈现我的组件。到目前为止还不错

我不知道如何将

index.html

文件中的初始值传递到

bundle.js

中定义的组件中。我知道这是一个变量范围问题，因为

ReactDOM

和组件不是全局的

让我举个例子。比如在

bundle.js

中，我有一个名为

Profile

的React组件，它为给定的用户名生成一个小的Profile小部件。我不想在

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>


ReactDOM.render(
, 
document.getElementById（'profile'）
);

当然，这不起作用，但希望能证明我想要完成什么。有人知道这样做的模式吗？谢谢。

在这种情况下，您需要使用普通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>

您可以访问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
);

我已经尝试过了，但是得到了一个JavaScript错误，没有定义

ReactDOM

。我的

bundle.js

似乎将其变量保持为局部变量。将

React

、

ReactDOM

和我的组件显式设置为全局变量会是一种不好的做法吗？e、例如，

window.React=require（'React'）

，

window.MyComponent=React.createClass（{…}）
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
);