小编Sag*_*b.g的帖子

解雇服务器调用在componentWillMount生命周期方法中获取数据是一种不好的做法？

为什么使用componentDidMount更好.

试图将一些代码从jss移植到样式组件,jss代码看起来像:

//...
const styles = {
  myStyles: {
    color: 'green'
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

export default function(props) {
  return (
     <div>
       <Widget1 className={classes.myStyles}/>
       <Widget2 className={classes.myStyles}/>
     </div>
  )
}

我的问题是在多个组件中实现相同样式共享的惯用方法是什么？

我无法实现两个嵌套map:

render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(this.state.templates).map(function(template_name) {
            return (
              <tr key={template_name}><td><b>Template: {template_name}</b></td></tr>

              {this.state.templates[template_name].items.map(function(item) {
                return (
                  <tr key={item.id}><td>{item.id}</td></tr>
                )
              })}
            )
          })}
        </tbody>
      </table>
    )
  }

这给了一个SyntaxError: unknown: Unexpected token.

你如何map在JSX中嵌套调用？

我存储url了一个tokenin statein Parent组件.我传递的url和token为props从父Component到子Component.但是,如果父项中存在某些事件Component,setState()则会触发并因此执行componentDidUpdate()子项Component.
由于componentDidUpdate()导致无限循环(因为它触发子组件内的setState()),我已经放置了条件.但这并不能防止错误.
子组件即DisplayRevenue如下:

import React, { Component } from 'react';
import '../App.css';
import ListData from './listdata.js'
var axios = require('axios');

class DisplayRevenue extends Component {

  constructor(props){
    super(props);
    this.state = { data:[], url:"" }
  console.log(this.props.url);
  }

  componentWillMount() {
    this.loadRevenue(this.props.url, this.props.token);
 }

  componentDidUpdate(){    //creates infinite loop
  //  console.log(this.props.url);
    this.loadRevenue(this.props.url, this.props.token); …

我正试着把头围绕在JSX上.我发现了一个非常奇怪的行为.这是我的代码:

const name = undefined;
const myFunc = () => undefined;
let template = (
  <div>
    {myFunc()}
    {name}
    {undefined}
  </div>
);

ReactDOM.render(template, document.querySelector("#root"));

输出是一次:undefined

为什么const"name"是唯一解析为字符串的未定义值？这个const和其他两个表达式有什么区别？(与Boolean和null相同.)请在此处查看我的代码:codepen

有人可以帮我解决如何在下拉菜单中使用onChange（语义UI React）。我正在阅读文档，但仍然不明白。它确实具有onChange道具。

onChange(event: SyntheticEvent, data: object)

如何使用？就像，我有方法dropdownmethod()。

编辑-实施了建议，但没有成功。我认为在您的建议中，您没有绑定功能。但是，我绑定了功能。

  onChangeFollower(event,data){

    console.log("on change follower",data.text)

  }

  render() {
    console.log("this.props",this.props)
    var onChangeFollower = this.onChangeFollower.bind(this)

    return (
      <div>
        <h2>project settings are here</h2>
        <h2>Add new Member</h2>

        <Dropdown onChange={onChangeFollower}
        placeholder='Select Member'
        fluid search selection options={arr} />

        <h2>List of members</h2>
        {lr}

      </div>

我有一个由MVC管理的路由的API.
最重要的是,我想用反应建立一个SPA.
然而,我在我的反应应用程序中构建的路线无法到达,我从ISS获得404,这里是我的代码中的存根.

export default class Layout extends React.Component {
render() {
   <div> 
     <Router history={ hashHistory }>
       <Route path="/" component={ Home } >
         <Route path="login" component={ Login } />
       </Route>
     </Router>
   <div>
}

当我将这个代码作为一个独立的后端执行时,它可以完美地工作.
有没有办法告诉MVC渲染设置URL的路由反应,让我们说"/ app/*".

提前致谢.

我在下面有这个简单的代码.当我按下切换按钮时,组件Child应隐藏/显示,但事实并非如此.

我必须重新渲染一些东西吗？我不想切换/退出CSS类,只需通过按钮点击切换即可

import React, {Component} from 'react';

let active = true

const handleClick = () => {
    active = !active
}

class Parent extends React.Component {
    render() {      
        return (    
            <div>  
                <OtherComponent />

                {active && <Child />}

                <button type="button" onClick={handleClick}>
                    Toggle
                </button>

            </div>            
        )           
    }
}

class Child extends React.Component {
    render() {

        return (    
            <div>          
                I am the child
            </div>            
        )             
    }
}

class OtherComponent extends React.Component {
    render() {       
        return (    
            <div>          
                I am the OtherComponent
            </div>            
        ) …

我刚刚通过React-bootstrap表单,它的用途controlId是什么,它类似于name我们在遗留形式中使用的？

<form>
    <FormGroup
      controlId="formBasicText" ---------------------->> what is the use?
      validationState={this.getValidationState()}
    >
      <ControlLabel>Working example with validation</ControlLabel>
      <FormControl
        type="text"
        value={this.state.value}
        placeholder="Enter text"
        onChange={this.handleChange}
      />
      <FormControl.Feedback />
      <HelpBlock>Validation is based on string length.</HelpBlock>
    </FormGroup>
  </form>

我一直在努力围绕这个概念,但没有运气.官方的React教程非常好,但对我来说这太复杂了,只是有点太难了.

我正在尝试理解Redux,到目前为止,我可以创建动作,减少器,我可以调度一个动作,然后在调度后查看存储状态如何变化.我还设法了解connectreact-redux并且它运行良好,我能够从我的应用程序的任何地方触发调度.所以我想我差点搞清楚了.几乎,因为这是房间里的大象 - 我发送动作,我看到Redux状态发生变化,但我如何更改UI？

例如text,我的初始状态中的对象具有值,Initial text并且一旦单击按钮,我想将文本更改为Clicked text并在UI中的某处显示文本(让我们说按钮).

如何在React中"访问"Redux状态,如何动态更改它？

没有React似乎很简单,例如:https://jsfiddle.net/loktar/v1kvcjbu/ - render函数处理一切,我理解这里发生的一切.

但另一方面来自官方React + Redux教程的"todo"看起来像这样:https://redux.js.org/docs/basics/ExampleTodoList.html,它太复杂了我不知道在哪里看.

该Add Todo按钮提交一个调度dispatch(addTodo(input.value))操作的表单.动作本身不会增加ID并将文本传递给存储,而reducer只返回新状态.然后如何在页面上呈现待办事项？哪里？我此时迷路了.也许有更简单的教程,我喜欢有一个按钮Redux教程,它仍然可以复杂的多层组件:(

我怀疑魔法发生在TodoList.js中,因为他们正在那里映射,但我仍然不知道todos来自哪里,以及它与Redux有什么关系(该文件中没有简单的reducer/action/dispatch) .

谢谢你的帮助!