标签: react-jsx

有没有办法将当前类的方法作为props传递给子类

举个例子;

var SignupModal = React.createClass({
mixins: [CheckMixin],
getInitialState: function(){
  return {
      'wizardstate': 0
  }
},
setWizardState: function(state){
    var that = this;
    switch (state){
        case 0:
           that.setState({'wizardstate': 0});
           break;
        case 1:
            that.setState({'wizardstate': 1});
            break;
        case 2:
            that.setState({'wizardstate': 2});
            break;
        case 3:
            that.setState({'wizardstate': 3});
            break;
        case 4:
            that.setState({'wizardstate': 4});
            break;
    }
},
render: function(){
    var temp;
    switch (this.state.wizardstate){
        case 0:
           temp = (<SignupSetup setWizardState={this.setWizardState}/>);
            break;
        case 1:
            temp = (<EmailSetup />);
            break;
        case 2:
            temp = (<PasswordSetup />);
            break;
        case 3: …

关于这一点有很多答案,但我正在寻找特定于reactjs的东西

我的组件代码:

  render: function () {

    return (
      <Modal {...this.props} title="Embed on your own site!">
        <div className="modal-body">
          <div className="tm-embed-container" dangerouslySetInnerHTML={{__html: embedCode}}>
          </div>
          <textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={embedCode}></textarea>
        </div>
      </Modal>
    );
  }
});

脚本标记在页面上,但没有执行.我是否应该做出反应,只是使用好的'DOM脚本',正如其他答案所示？

我使用browserify和watchify,并想require()比默认扩展名的其他文件.js,并.json没有指定扩展名,比如:

// Not ideal (tedious)
var Carousel = require('./components/Carousel/Carousel.jsx')

// Ideal
var Carousel = require('./components/Carousel/Carousel')

我曾尝试--extension=EXTENSION为在指定browserify文档:

"scripts": {
  "build": "browserify ./src/App.js --transform [ reactify --es6 ] > dist/script.js -v -d --extension=jsx",
  "watch": "watchify ./src/App.js --transform [ reactify --es6 ] -o dist/script.js -v -d --extension=jsx"
},

但是我没有看到任何变化.这可能吗？这样做的正确方法是什么？

当使用React在服务器上呈现组件时,我注意到data-reactid属性实际上是随机的.我明白这是预期的.(https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8)

然而,这个功能框架在视图输出中引入了这种非确定性,这有点令人惊讶.这意味着具有相同状态的视图的连续渲染将创建不同的HTML,例如,防止视图引擎返回"304 Not Modified"或生成可靠的ETag.(我很欣赏这种缓存也可以在更高的基础设施层处理.)

有没有办法种子生成标识符,以便反应是确定性的？或者是在其他地方解释一个坏主意的原因？

我有一个相当简单的问题,我不知道如何使用React的单向数据流来解决它.

假设您在父级中有一个显示模态的链接

在模态中,你有一个"X"来关闭它.

我知道我可以通过道具从父母改变模态的状态

// In the parent
<Modal display={this.state.showModal} />

// In the modal
<div className={this.props.display ? "show" : "hide"}>
  <a className="close">&times;</a>
  ...
</div>

我知道如何关闭模态,但不是两者兼而有之.不确定如何保持父模式和子模式共享和控制的状态.

UPDATE

在尝试尽可能保持模块化时,我认为React方法是将开/关逻辑存储在模态变量中.

var ParentThing = React.createClass({
  ...
  render (
    <Modal /> // How can I call this.open in the modal from here?
  )
});

var Modal = React.createClass({
  setInitialState: function() {
    return {
      display: false
    }
  },
  close: function() {
    this.setState({ display: false });
  },
  open: function() {
    this.setState({ display: true });
  },
  render: …

我找不到一个很好的最基本的例子,我可以连接一个express.js路由来调用反应视图.

到目前为止,这就是我所拥有的.

+-- app.js
+-- config
|   +-- server.js
+-- routes
|   +-- index.js
+-- views
|   +-- index.html

app.js

require('./config/server.js');
require('./routes/index.js');

配置| server.js

"use strict";
var express = require('express'),
app = express(),

routes = require('./routes');

app.set('view engine', 'html');
app.engine('html', ); // how do I tell express that JSX is my template view engine?

var port = process.env.PORT || 3000;

app.engine('handlebars', exphbs({ defaultLayout: 'main'}));
app.set('view engine', 'handlebars');


var server = app.listen(port, function(){
    console.log('Accepting connections on port ' + port + …

我在React面临一个非常讨厌的行为.我想使用上传从父组件到子组件的上下文getChildContext.只要我不在{this.props.children}渲染功能中使用,一切正常.如果我这样做,则子组件的上下文未定义.

我附加了一个重现此行为的代码示例.我无法弄清楚为什么bar组件的上下文字段Baz是undefined.

var Baz = React.createClass({
 contextTypes: {
   bar: React.PropTypes.any
 },
 render: function() {
   console.log(this.context);
   return <div />;
 }
});

var Bar = React.createClass({
 childContextTypes: {
   bar: React.PropTypes.any
 },

 getChildContext: function() {
   return {
     bar: "BAR"
   };
 },

 render: function() {
   return (<div>{this.props.children}</div>);
 }
});

var Foo = React.createClass({
 render: function() {
   return <Bar>
      <Baz />
   </Bar>;
 }
});

console.log(React.version);

React.render(<Foo />, document.body);

控制台输出:

Warning: owner-based and parent-based contexts differ …

如何在Typescript tsx中遍历React组件的子项？

以下是有效的jsx:

public render() {
    return (
        <div>
            {React.Children.map(this.props.children, x => x.props.foo)}
        </div>
    );
}

但是,在Typescript中,x的类型是React.ReactElement<any>这样我无法访问props.我需要做某种铸造吗？

最近我一直在玩react.js,我喜欢我可以开发工作UI组件的速度.我现在已经创建了很多组件,我想在不同的.jsx文件中分发一些组件.

我读过的每件事都说我每次搬到生产时都应该使用像browserify或webpacker这样的捆绑器.但是我反对这个想法.我喜欢在javascript中开发的部分原因是因为它是一种脚本语言而且没有编译器可以解决这个问题.如果我想搞乱构建链等,我可能只是在c中进行开发工作.

我主要制作工程工具.这涉及制作工具,然后让其他工程师和操作员使用.我可能不会在一两年后再看一个工具.我希望当我确实需要再次查看它或者跟在我后面的人需要查看它时,他们可以直接进入源代码并开始进行更改.我不想记得我的构建环境是如何在2016年建立的.

对于我的特定应用程序,我也不关心加载速度或客户端资源.没有人使用手机中的工具,很少重新加载工具.

因此,除非你能说服我确实想要捆绑,否则将单个页面Web应用程序与react.js组件分成多个.jsx文件放在一起的最简洁方法是什么？

更新/改进的问题/部分答案:

我从没有NPM的快速入门示例开始.这是我想要实现的一个简单示例:

index.html的:

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel" src="hello1.jsx"></script>
        <script type="text/babel" src="hello2.jsx"></script>
        <script type="text/babel">
            ReactDOM.render(
                <div>
                    <Hello name='Bruce'/>
                    <Hello2 name='Bruce'/>
                </div>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

hello1.jsx:

var Hello1 = React.createClass({
    render: function() {
        var name = this.props.name;
        var message = 'Hello ' + name;
        return <h1>{message}</h1>;
    }
});

window.Hello1 = Hello1;

hello2.jsx:

var Hello2 = React.createClass({ …

我正在寻找typehtml <script>标签内属性的清晰解释.对于我作为网络开发人员的大部分职业生涯,我在互联网上的指示是:

• 只需编写<script type='text/javascript'>然后将javascript放入其中.
• 在html5中,只需写入,<script>因为它text/javascript是默认值.

而且最长的时间我很天真,只是做了我被告知的事情.现在我正在学习ReactJS,并且有一套新的指令:

• 将babel脚本包含在文件的顶部
• 现在写 <script type="text/babel">
• 瞧!现在你可以在该标签内写一些看起来很像Javascript的东西,但它还有一堆很酷的额外功能.

我想了解添加type='text/babel'到script标签背后的魔力.我知道javascript是实际在浏览器中运行的唯一语言,因此该额外属性,babel脚本和您在其中编写的代码之间的关系是什么.这个标签是否以某种方式找到了babel脚本并对其做了些什么？这是一个基本的浏览器/ js功能,允许在javascript执行之前预处理脚本标签中的文本吗？我还应该知道什么？

神秘化是这个问题的目标.