标签: react-jsx

props在React/JSX中多次访问相同的值时,建议将对象缓存在局部变量中吗？

var ItemComponent = React.createClass({

  render: function() {

    var cached = this.props.item;

    return (
      <div className={cached.class}>
        <h1>{cached.heading}</h1>
        <p>{cached.text}</p>
      </div>
    );
  }
});

我遇到的情况是，我将两个要素捆绑在一起，而一个董事会以不可商议的方式始终由4个细分小组组成：

var BoardPanel = React.createClass({
  getInitialState: function() {
    return { someval: '' };
  }, 
  render: function() {
    <div>{this.state.someval}</div>
  },
  doSomething: function(v) {
    setState({ someval: v });
  }
});

var BoardLayout = React.createClass({
  render: function() {
    <div>
      <h1>{this.props.label{</h1>
      <div ref="panels">
        <BoardPanel />
        <BoardPanel />
        <BoardPanel />
        <BoardPanel />
      </div>
    </div>
  }
});

BoardLayout应该能够统一地告诉每个BoardPanel调用面板API函数，所以我想做React.js的等效项：

this.querySelectorAll("BoardPanel")
    .array()
    .forEach(function(panel, idx) {
       panel.doSomething(idx);
    });

请注意，我明确不希望在这里访问DOM节点，我要访问的阵营定义的虚拟元素，对通话功能，并且永远不会触及任何真正的浏览器的DOM使用。

我看了看React.children实用程序函数，但是这些函数没什么用，因为无法指定我想要的子代，并且this.props.children要给我两个div元素，因为BoardPanel元素位于模板内部。

（我也很反对ref="..."为每个BoardPanel 添加一次性标识符，因为考虑到格式合理，结构化的标记，不需要做任何事情，这是一个可行的解决方法，但似乎像拍打一样明智。 HTML文件中每个元素的ID，而不是依赖查询选择器）

我可以通过根本不将它们实际包含在模板中并使用React.create(BoardPanel)in 添加它们来动态生成它们，BoardLayout.getInitialState但这会使立即具有洞察力的模板结构变成不透明的占位符，这也是我不希望做的事情。 …

我需要根据复选框中的事件显示一些HTML.父节点上的onClick事件在放入forEach循环时没有传递函数(这是我的小提琴).关于它的奇怪之处在于,当我将它传递给单个元素时它会传递一个函数.

var App = React.createClass({
  getInitialState: function() {
    return {toggle: false}
  },
  handleClick : function(event){
    this.setState({toggle : !this.state.toggle});
  },
  render: function(){
    var checkboxes = [];
    this.props.data.forEach(
      function(name)
      {
        checkboxes.push(<CheckBox onClick={this.handleClick} name={name} />);
                        });
        var textBox = this.state.toggle ? <InputBox name="Bar" /> : null;
        return (
          <div>
          <CheckBox name="Foo" onClick={this.handleClick} />
          {checkboxes}
          {textBox}
          </div>
        );
      }
});

有谁知道为什么会这样？这是一个错误还是我做错了什么？

我有一个包含逗号的字符串(地址),我想在一些JSX中划分换行符.执行以下操作仅输出<br />字符串:

{address.split(',').join('<br />')}

我怎样才能做我需要做的事情,最好保留逗号？

我想在onCLick上调用updateCurrentThread方法,但是我遇到了以下错误:

未捕获的TypeError:无法读取未定义的属性"updateCurrentThread"

updateCurrentThread: function(thread) {
  this.setState({
  currentThread: thread
 }).bind(this);
},


render: function () {
  var threads = this.state.data.map(function (thread) {
    var boundClick = this.updateCurrentThread.bind(this, i);
    let time = getThreadDate(thread.timestamp);
    return (
      <div className="row thread" key={thread.threadID}>
        <ThreadParticipants onClick={boundClick} key={i} className="small-2 small-centered columns" ids={thread.participantIDs}/>
      </div>
  );
})

我创建了一个中间件来检查请求是否返回无效的访问响应.如果状态是401,我想将用户重定向到登录页面

这是中间件代码

import React from 'react';
import { push, replace } from 'react-router-redux';

const auth_check = ({ getState }) =>  {
  return (next) => (action) => {
    if(action.payload != undefined && action.payload.status==401){
        push('login');
        console.log('session expired'); 
    }
    // Call the next dispatch method in the middleware chain.
    let returnValue = next(action);

    return returnValue
  }
}

export default auth_check;

将它包含在index.js中

...

const store = createStore(reducers, undefined, 
            compose(
                applyMiddleware(promise,auth_check)
                )
            );
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
  <Provider store={store}>
    <Router history={history} routes={routes} /> …

我已经为Visual Studio代码编辑器安装了ESLint插件,它显示它也已安装,但我仍然看到错误:在编辑器窗口顶部找不到Visual Studio Code的ESLint配置,如下面的屏幕截图所示:

任何人都可以帮助我知道我在这里缺少什么.

这是ES5中的代码,其中jsx被写入单独的文件中

import React from 'react';
import Template from './template.jsx';

const DetailElement = React.createClass({
  render: Template
});

export default DetailElement;
enter code here

template.jsx文件将是这样的

import React from 'react';

const render = function() {

    return (
      <div>Hello World</div>
    );
};

export default render;

如何使用ES6类编写相同的内容？或者可以使用任何其他解决方案进行此分离？

我有这样的ES6代码

import React, {Component} from 'react';
import Template from './template.jsx';

export default DetailElement extends Component {
   componentDidMount() {
    // some code
  }
};
DetailElement.prototype.render = Template;

是的,这是有效的.

目前我已经构建了一个非常简单的工厂,它查看JSON配置并使用它来为该组件动态生成组件和适当的道具:

let exampleJSON = {
  "components": [
    {
      "type":"ComponentA",
      "params": { myProp: "hey there"  }
    },
    {
      "type":"ComponentB",
      "params": { myOtherProp: "Yo"  }
    }
  ]
}

const ComponentA = (props) => {
  let { myProp } = props;
  return  (
    <div>{ myProp }</div>
  )
}

const ComponentB = (props) => {
  let { myOtherProp } = props;
  return  (
    <div>{ myOtherProp }</div>
  )
}

const ComponentFactory = (props) => {
  const { content } = props;
  return (
    <div>
      { …

我有此表格，我想发送这些值。我知道我们必须用来setState()存储数据，但是它如何工作input type="hidden"？

1. 第一个问题：如何存储对setState隐藏的输入？
2. 第二个问题：如何序列化form.serialize（）这样的数据？
3. 第三个问题：如何发送这些序列化值？Ajax还是Axios，谁更好？

这是代码：

handleSubmit(e) {
    e.preventDefault();

   /**
    $.ajax({
        url: "post.php",
        type: "POST",
        data: DATA,
        success:function(data) {

        }
    });
    **/
 }

            <form onSubmit={this.handleSubmit}>
                        <input type="hidden" name="action" value="login" />
                        <input type="email" name="email_user" placeholder="Email" />
                        <input type="password" name="password_user" placeholder="Mot de passe" />
                        <button type="submit">Login</button>
            </form>