标签: reactjs

编辑:这是重复,请看这里

在设置状态时,我找不到任何使用动态密钥名称的示例.这就是我想要做的:

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

其中event.target.id用作要更新的状态键.这在React中不可能吗？

我正在使用React学习Redux并且偶然发现了这段代码.我不确定它是否特定于Redux,但我在其中一个示例中看到了以下代码片段.

@connect((state) => {
  return {
    key: state.a.b
  };
})

虽然功能connect非常简单,但我@之前并不理解connect.如果我没错,它甚至不是JavaScript运算符.

有人可以解释一下这是什么,为什么用它？

更新:

事实上,react-redux它的一部分用于将React组件连接到Redux存储.

我正在创建一个用户可以设计自己的表单的应用程序.例如,指定字段的名称以及应包含哪些其他列的详细信息.

该组件在此处作为JSFiddle提供.

我的初始状态如下:

var DynamicForm = React.createClass({
  getInitialState: function() {
   var items = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'customer_name',
                autocomplete_from: 'customer_name', title: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'user_name', 
                    autocomplete_from: 'user_name', title: '' };

     return { items };
   },

  render: function() {
     var _this = this;
     return (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           return (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key} 
                   populate_at={data.populate_at} />
            </div>
            ); …

是否可以使用setState更新对象的属性？

就像是:

this.state = {
   jasper: { name: 'jasper', age: 28 },
}

我试过了:

this.setState({jasper.name: 'someOtherName'});

还有这个:

this.setState({jasper: {name: 'someothername'}})

第一个是语法错误,第二个什么都不做.有任何想法吗？

给出一个渲染其子代的简单组件:

class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }

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

export default ContainerComponent;

问题:儿童道具的propType应该是什么？

当我将其设置为对象时,当我使用具有多个子元素的组件时,它会失败:

<ContainerComponent>
  <div>1</div>
  <div>2</div>
</ContainerComponent>

警告:失败的道具类型: 提供children的类型的无效道具,预期.arrayContainerComponentobject

如果我将它设置为一个数组,如果我只给它一个孩子,它将会失败,即:

<ContainerComponent>
  <div>1</div>
</ContainerComponent>

警告:失败的道具类型:提供给ContainerComponent的类型对象的无效道具子项,预期数组.

请指教,如果我不打算对儿童元素进行propTypes检查？

我正在使用 React Router v6 并为我的应用程序创建私有路由。

在文件PrivateRoute.js中，我有代码

import React from 'react';
import {Route,Navigate} from "react-router-dom";
import {isauth}  from 'auth'

function PrivateRoute({ element, path }) {
  const authed = isauth() // isauth() returns true or false based on localStorage
  const ele = authed === true ? element : <Navigate to="/Home"  />;
  return <Route path={path} element={ele} />;
}

export default PrivateRoute

在文件route.js中我写的是：

 ...
<PrivateRoute exact path="/" element={<Dashboard/>}/>
<Route exact path="/home" element={<Home/>}/>

我已经完成了相同的示例React-router Auth 示例 - StackBlitz，文件 App.tsx

我有什么遗漏的吗？

在React(Facebook的框架)中,我需要使用标准for属性渲染绑定到文本输入的标签元素.

例如,使用以下JSX:

<label for="test">Test</label>
<input type="text" id="test" />

但是,这会导致HTML缺少必需(和标准)for属性:

<label data-reactid=".1.0.0">Test</label>
<input type="text" id="test" data-reactid=".1.0.1">

我究竟做错了什么？

我在ES6中编写了一个简单的组件(使用BabelJS),并且函数this.setState不起作用.

典型的错误包括

无法读取未定义的属性'setState'

要么

this.setState不是函数

你知道为什么吗？这是代码:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

我正在尝试升级到 React Router v6 ( react-router-dom 6.0.1)。

这是我更新的代码：

import { BrowserRouter, Navigate, Route, Routes } from \'react-router-dom\';\n\n<BrowserRouter>\n  <Routes>\n    <Route path="/" element={<Home />} />\n    <Route path="/lab" element={<Lab />} />\n    <Route render={() => <Navigate to="/" />} />\n  </Routes>\n</BrowserRouter>\n

最后Route是将其余路径重定向到/.

但是，我收到了一个错误

\n

TS2322：类型 \'{ 渲染：() => 元素；}\' 不可分配给类型“IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\”。\xc2\xa0\xc2\xa0Property \'render\' 在类型 \'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\' 上不存在。

\n

然而，根据文档，它确实有renderfor Route. …

官方的React文档声明" 只是React.PureComponent浅析shouldComponentUpdate()对象",并建议如果状态是"深度"的话.

鉴于此,React.PureComponent在创建React组件时,有什么理由可以选择吗？

问题:

• React.Component我们可能考虑采用的是否会对使用产生任何性能影响React.PureComponent？
• 我猜 shouldComponentUpdate()的PureComponent执行只有浅薄的比较.如果是这种情况,不能说方法可以用于更深层次的比较吗？
• "此外,我们React.PureComponent会shouldComponentUpdate()跳过整个组件子树的道具更新" - 这是否意味着道具变更被忽略了？

问题来自于阅读这个媒体博客,如果它有帮助.