我正在尝试使用React钩子解决一个简单的问题

const[personState,setPersonState]=  useState({DefinedObject});

具有以下依赖性。

"dependencies": {
 "react": "^16.8.6",
 "react-dom": "^16.8.6",
 "react-scripts": "3.0.0"
}

但我仍然收到以下错误：

./双人床/app.就是

第7行：
在函数中调用React Hook“ useState” “ app”既不是React函数组件也不是自定义React 挂钩功能react-hooks / hooks-hoks

第39行：
未定义“状态”
没有undef

搜索关键字以了解有关每个错误的更多信息。

我正在寻找null

“这是必需的，它将是数字或为空”

换句话说，我现在拥有的是

PropTypes.number.isRequired

但是如果传入null值会发出警告，但我希望null是可接受的值。

我在更改视图以响应路由时遇到麻烦。 似乎我已经尝试过一切我可以通过Google尝试的方法。 我只想显示一个用户列表，单击每个用户应导航到详细信息页面。 这是路由器：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

当我使用url / details时，我的浏览器会导航到该url，但不会更改视图。 任何其他路由都会抛出404，因此似乎可以识别该路由，但无法更新。

我有一个React + Webpack / Babel + Node / Express应用程序，我想在AWS上部署它。

我需要分别部署React和Node / Express吗？ 还是可以同时部署它们？

使用打字稿，并对带有明确键入类型定义的TSX文件做出反应，我得到了以下错误：

error TS2339: Property 'for' does not exist on type 'HTMLProps<HTMLLabelElement>'.

尝试使用以下TSX编译组件时

<label for={this.props.inputId} className="input-label">{this.props.label}</label>

我已经解决了，但是在这里添加了下一个人，因为该解决方案在搜索时未显示在任何地方（Google或StackOverflow）

加载我的React应用程序时，我在控制台中收到此错误。

警告：表单propType失败：您向表单提供了value prop 没有onChange处理程序的字段。 这将呈现一个只读 领域。 如果该字段是可变的，请使用defaultValue。否则， 设置onChange或readOnly。检查的渲染方法 AppFrame。

我的AppFrame组件如下：

class AppFrame extends Component {
    render() {
        return (
            <div>
                <header className="navbar navbar-fixed-top navbar-shadow">
                    <div className="navbar-branding">
                        <a className="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form className="navbar-form navbar-left navbar-search alt" role="search">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Search..."
                                   value="Search..."/>
                        </div>
                    </form>
                    <ul className="nav navbar-nav navbar-right">
                        <li className="dropdown menu-merge">
                            <span className="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" className="nano nano-light affix">

                    <div className="sidebar-left-content nano-content">

                        <ul className="nav sidebar-menu">
                            <li className="sidebar-label pt20">Menu</li>
                            <li className="sidebar-label">
                                <IndexLink to="/" activeClassName="active">Dashboard</IndexLink>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/fixtures" activeClassName="active">Fixtures</Link>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/players" activeClassName="active">Players</Link>
                            </li>
                        </ul>

                    </div>

                </aside>
                <section id="content_wrapper">
                    <section id="content" className="table-layout animated fadeIn">
                        {this.props.children}
                    </section>
                </section>
            </div>

        )
    }
}

export default AppFrame;

我正在努力找出我实际上在这里做错了什么。 该应用程序启动并运行，但是我正在尝试删除所有控制台警告/错误。

我有一个带有分数的项目列表，这些分数按分数排序，由react.js呈现为垂直方向的矩形项目列表（最高分数在顶部）。 将鼠标悬停在单个项目上或其他单击可能会显示/隐藏其他信息，从而更改其垂直高度。

新信息的到来改变了分数，使某些物品在重新排序后排名更高，而另一些排名更低。 我希望这些项目同时为它们的新位置设置动画，而不是立即出现在其新位置。

在React.js中是否有推荐的方法可以做到这一点，也许还有一个流行的插件？

（在过去类似的情况下，使用D3时，我使用的技术大致是：

1. 以自然顺序显示具有项目DOM节点的列表，并具有相对位置。 通过相对定位，其他细微的更改（由CSS或JS触发）在单个项目的范围内可以按预期转移其他项目。
2. 只需一步，即可对所有DOM节点进行突变，以将其实际相对坐标作为新的绝对坐标–不会引起视觉变化的DOM更改。
3. 将项目DOM节点在其父级内重新排序为新的排序顺序–另一个DOM更改不会引起视觉变化。
4. 根据新排序中所有先前项目的高度，使所有节点的顶部偏移动画化为其新的计算值。 这是唯一的视觉激活步骤。
5. 将所有项目DOM节点突变回非偏移相对位置。 再次，这不会引起视觉上的变化，但是以基础列表的自然顺序现在定位的DOM节点将通过适当的移位来处理内部悬停/扩展/等样式更改。

现在我希望以一种类似React的方式获得类似的效果...）

我正在使用Facebook / React Native，当我运行git init时，我不知道node_modules文件夹应该忽略什么，

我应该提交所有iOS文件夹吗？

谢谢

我在数组中呈现对象输入元素的集合。

render: function() {
    var ranges = [];
    this.props.ranges.map(function(range, index) {
        var rangeElement = <Input type="text"
            value={range.name} onChange={this.changeRangeName.bind(this)} />
        ranges.push(rangeElement);
    }, this);

    // render ranges
}

这使我可以编写onChange处理函数：

changeRangeName: function (event) {
    var newName = event.target.value;
},

但在此处理程序中，我需要更改的范围对象的ID。 因此，我可以更改更改在渲染函数中创建输入元素的方式并更改：

var rangeElement = <Input type="text"
            value={range.name}
            onChange={this.changeRangeName.bind(this, range.id)} />

现在，我的处理程序将接收range.id作为参数，但是现在我没有newName值。 我可以使用裁判获得它

var rangeElement = <Input type="text"
            ref={'range' + range.id}
            value={range.name}
            onChange={this.changeRangeName.bind(this, range.id)} />

这是我知道的唯一解决方案，但我怀疑有更好的解决方案。

在具有输入字段的Reactjs中创建组件时发生错误Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div>

var Main = React.createClass({
    render: function() {
        return (
            <div className="card-action">
                <i class="mdi-action-account-circle prefix"></i>
                <input id="icon_prefix" type="text" class="validate">
            </div>
        );
    }
});

我正在开发可与fluxible一起使用的最小应用程序。 几乎所有事情似乎都清楚了，但只有一件事：脱水和复水状态的概念。

我知道这是在客户端和服务器之间同步存储所需要的，但是我不知道为什么。 这行对我来说还不清楚：

 var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

在server.js中[[https://github.com/yahoo/fluxible/tree/master/examples/react-router）]

如果您能用“更简单的词”告诉我，我将不胜感激。

我正在通过在线教程来学习自己。

因此，这是有关使用React Router的基本示例：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </Route>
</Router>

使用我的App组件：

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
              <li><Link to="home">Home</Link></li>
              <li><Link to="about">About</Link></li>
              <li><Link to="contact">Contact</Link></li>
           </ul>
          {this.props.children}
        </div>
     )
   }
}
export default App;

但是，我在使用IndexRoute时遇到问题，因为它什么也没显示，所以我在npm上搜索react-router-dom v4的模块，并且里面没有IndexRoute。相反，它使用以下代码：

<Router>
  <div>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
  </ul>
  <hr/>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/contact" component={Contact}/>
  </div>
</Router>

那么如何为1个路径渲染2个组件？

如果我有类似的东西

<Parent>
  <Child1 />
  <Child2 />
  <Child3 />
</Parent>

我想从Child2访问，那里有refs="child2refs"，我该怎么做？

我很困惑，组件和React类之间有什么区别？

以及何时在React类上使用组件？看起来组件是一个类，而createClass创建一个组件。

[HTTPS://Facebook.GitHub.IO/react/docs/top-level-API.HTML]

React.Component

当使用以下组件定义React组件时，这是它们的基类 ES6类。 请参阅可重用组件，以了解如何将ES6类与 反应 有关基类实际提供的方法，请参见 组件API。

React.createClass

给定规范创建一个组件类。 组件 实现一个返回单个孩子的render方法。 那个孩子 可能具有任意深度的子结构。 一件事使 与标准原型类不同的组件是 不需要对它们进行新的调用。 他们是方便包装 为您构造支持实例（通过新实例）。

我正在尝试将React Router与TypeScript一起使用。 但是，我在使用withRouter函数时遇到某些问题。 在最后一行，我收到了很奇怪的错误：

Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'RouteComponentProps<any>'.
      Property 'match' is missing in type '{}’

代码如下：

import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface HomeProps extends RouteComponentProps<any> {
}

interface HomeState { }

class Home extends React.Component<HomeProps, HomeState> {
  constructor(props: HomeProps) {
    super(props);
  }
  public render(): JSX.Element {
    return (<span>Home</span>);
  }
}

const connectModule = connect(
  (state) => ({
    // Map state to props
  }),
  {
    // Map dispatch to props
  })(Home);

export default withRouter(connectModule);

我正在构建一些React组件，有时想通过console.log将呈现的组件类型记录到控制台，JSX在显示组件名称时会使用该类型。

从组件的上下文中，如何访问console.log属性？

例如 如何使此示例中的console.log语句显示组件的displayName？

var Hello = React.createClass({
    displayName: 'HeyHey',

    render: function() {
        console.log(this.displayName);

        return <div>Hello {this.props.name}</div>;
    }
});

控制台中的预期输出：

嘿嘿

我正在尝试为数据结构创建一个简单的基于网格的编辑器，而我在React.js中遇到了几个概念上的问题。 他们的文档在这方面不是很有帮助，所以我希望这里的人能为您提供帮助。

首先，将状态从外部组件传输到内部组件的正确方法是什么？ 内部组件是否可能“冒泡”到外部组件而发生状态变化？

第二，两个单独的组件是否可以共享数据，以便一个组件中的一个可见于另一个组件中？

下面是我想做的事情的简化示例（JSFiddle版本）：

我有一个company对象，其中包含employee对象的数组。 我想在可编辑的网格中布置employee列表。 当我单击按钮时，我想看到生成的company对象，以及任何突变（写入控制台）。

/** @jsx React.DOM */

var Cell = React.createClass({
    getInitialState: function () {
        return {data: ""};
    },

    componentWillMount: function () {
        this.setState({data: this.props.data});
    },
    onChange: function (evt) {
        console.log(this.state, evt.target.value);
        this.setState({data: evt.target.value});
    },
    render: function () {
        var data = this.props.data;
        return <input value={this.state.data} onChange={this.onChange} />
    }
});

var Row = React.createClass({
    render: function () {
        return (<div className="row">
            <Cell data={this.props.data.name} />
            <Cell data={this.props.data.location} />
            <Cell data={this.props.data.phone} />
        </div>);
    }
});

var Grid = React.createClass({
    render: function () {
        var rows = this.props.data.map(function (rowData, index) {
            return <Row key={index} data={rowData}>Row</Row>;
        });
        return <div className="table">{rows}</div>;
    }
});

var Button = React.createClass({
    getInitialState: function () {
        return {data: {}}
    },
    componentWillMount: function () {
        this.setState({data: this.props.data});
    },
    onClick: function () {
        console.log(this.state);
    },
    render: function () {
        return <button onClick={this.onClick}>Update</button>;
    }
});

var company = {
    name: "Innotech",
    employees: [
        {id: "1", name: "Peter", location: "IT", phone: "555-1212"},
        {id: "2", name: "Samir", location: "IT", phone: "555-1213"},
        {id: "3", name: "Milton", location: "loading dock", phone: "none"}
    ]
};


React.renderComponent(
    <div><Grid data={company.employees} /><Button data={company} /></div>,       
    document.getElementById('employees')
);

我正在尝试找到最适合与我的React应用程序一起使用的表，而现在，react表提供了我需要的一切（分页，服务器端控件，过滤，排序，页脚行）。

话虽这么说，我似乎无法选择一行。 没有任何例子可以证明这一点。

我尝试过的某些事情包括尝试在单击行时设置className。 但是我似乎在e或t中都找不到调用元素。而且，我不喜欢这种方法，因为这不是React应用程序应该做的事情。

<ReactTable
            ...
            getTrProps={(state, rowInfo, column, instance) => {
                return {
                    onClick: (e, t) => {
                        t.srcElement.classList.add('active')
                    },
                    style: {
                    }
                }
            }}
        />

一些可能的解决方法是将复选框呈现为第一列，但这并不是最佳选择，因为它限制了单击以“激活”行的区域。 同样，视觉反馈将缺乏表现力。

我想念房间里的大象吗？ 如果不是，您是否知道另一个支持我前面描述的内容的库？

谢谢！

编辑：另一个选择是开源，它是建议编辑的。 也许这是正确的做法。

编辑2

DavorinRuševljan在评论中建议的另一件事是，但我无法使它起作用：

onRowClick(e, t, rowInfo) {
    this.setState((oldState) => {
        let data = oldState.data.slice();
        let copy = Object.assign({},  data[rowInfo.index]);

        copy.selected = true;
        copy.FirstName = "selected";
        data[rowInfo.index] = copy;

        return {
            data: data,
        }
    })
}

....

            getTrProps={(state, rowInfo, column) => {
                return {
                    onClick: (e, t) => { this.onRowClick(e, t, rowInfo) },
                    style: {
                        background: rowInfo && rowInfo.row.selected ? 'green' : 'red'
                    }
                }
            }}

这会将“名字”列设置为“选定”，但不会将类设置为“绿色”

我想知道是否有人知道如何在“ create-react-app”环境中在dev上使用https。 在README或快速谷歌搜索中我什么都看不到。 我只希望[https：// localhost：3000]工作，否则[https：// localhost：3001。

我知道在componentDidMount上设置状态是一种反模式，应该在componentWillMount上设置状态，但是假设我想将li标签数量的长度设置为一个状态。 在那种情况下，我无法在componentWillMount上设置状态，因为在该阶段可能未安装li标签。 那么，这里最好的选择是什么？ 如果将状态设置为componentDidMount，可以吗？