相关疑难解决方法(0)

我认为这是一个非常愚蠢的怀疑,但我陷入了困境.我有多个单选按钮,我想在我点击另一个单选按钮后取消选中所有单选按钮.如何在反应中实现它？

var options = [{id:1,nm:"Appointment fixed"},{id:2,nm:"Call later"},{id:3,nm:"Wrong number"},{id:4,nm:"Don't call again"},{id:5,nm:"Call later"}];
{options.map((item,i) => {
                     return (
                        <div onChange={(i)=>this.callOptions(i)}>
                           <label className="radio-inline"><input type="radio" value={i} ref={'ref_' + i} value={item.id}/>{item.nm}</label>
                        </div>
                      )
                  })}

我正在尝试在 React 中创建一个 Form 组件，有点像Formik，但更简单。

我的想法是onChange为所有孩子添加一个处理程序。我正在这样做children.map()。它有效，但是我收到一个关键警告

Warning: Each child in a list should have a unique "key" prop.

我知道没有办法抑制这种情况，所以也许有更好的方法来创建这个表单组件？<input>另外，如果不是直系孩子，我应该如何处理这种情况？

编辑：我知道如何避免这个问题，我主要想要解决这个问题的最佳方法，包括嵌套输入的情况。

这是我想如何使用它：

<Form>
  <label htmlFor="owner">Owner</label>
  <input
    type="text"
    name="owner"
    id="owner"
  />
  <label htmlFor="description">Description</label>
  <input
    type="text"
    name="description"
    id="description"
  />
  <input
    type="submit"
    value="Submit"
  />
</Form>

这是我的代码：

import React from 'react';
    
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.handleInputChange = this.handleInputChange.bind(this);
  }
    
  handleInputChange(event) {
    const target = event.target;
    const value =
      target.type …

我想循环一个数组并从中创建列表项.在控制台中,它显示错误被抛出,因为我的数组没有键但只有值.那么读出数组的正确操作是什么？

*// this.props.items = ["cars","streets","houses"];*Wrong. You can't update props

var TodoList = React.createClass({
 render: function() {
  var createItem = function(item) {
  return <li>{item}</li>;
  };
  return <ul>{this.props.items.map(createItem)}</ul>;
}
});

我希望能够通过单击按钮来增加 DOM 元素的不透明度。

围绕 React 的概念，我认为这应该通过使用state和函数来完成setState()。

但是，我不断遇到以下代码的错误：

import React, { Component } from 'react'

class ThoughtfulThoughts extends Component {

  state = {
    opacity: 0.4,
    thoughts:
      [
        "live and let leave",
        "just pee yourself",
        "who knows what 'laf' is?"
      ]
  }

  makeAppear = () => {
    // TODO: this causes a "RangeError: Maximum call stack size exceeded"
    this.setState(prevState => ({
      opacity: prevState.opacity + 0.2
    }))
  }

  render() {
    return (
      <div className="thoughtful-thoughts">
        <div className="current-thought" style={{opacity: …

我有一个反应应用程序，我在其中使用“react-image-pan-zoom-rotate”来显示图像。

https://github.com/mgorabbani/react-image-pan-zoom-rotate

我基本上有一个外部服务的 url，它提供了我传递给以下两个库以呈现图像的图像。

最近我开始面临一个问题（仅在 Chrome 中），如果缓存被禁用，那么每当我在浏览器中单击图像或使用此组件提供的任何控件时，它都会重新渲染它，从而导致对外部图像服务器的另一次调用。每当我单击/与上述反应库生成的图像或视图进行交互时，就会发生这种情况。

现在我已经开始使用https://github.com/theanam/react-awesome-lightbox/blob/master/src/index.js并且它在禁用缓存的情况下没有任何此类问题。

知道为什么会发生这种情况吗？

我在React JS组件中的关键道具有问题.

我越来越

警告:数组或迭代器中的每个子节点都应该具有唯一的"键"支柱.检查Login的render方法.它从App传递了一个孩子.

控制台日志中的警告.App组件如下:

import React from 'react';
import Header from '../common/header';
import HeaderCompact from '../common/headerCompact';
import Footer from '../common/footer';


class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      lang: 1
    };
  }

  changeLang(name, event) {
    event.preventDefault();
    switch (name) {
      case "fra" :
        this.setState({lang: 2});
        break;
      case "ger" :
        this.setState({lang: 3});
        break;
      case "ned" :
        this.setState({lang: 4});
        break;
      default:
        this.setState({lang: 1});
    }
  }


  render() {
    let currentRoute = this.props.location.pathname.slice(1);
    let header = currentRoute === "" ? <Header …

我有一个数组,我有一个简单的字符串值.我想映射我的数组,因为我试图找到我的字符串值.

我有这样的代码,但map函数不返回任何内容:/

class Application extends React.Component {
  constructor(){
    super();

    this.state = {
      questionAnswer: 'is that possible',
      question: ['is', 'possible', 'that']
    }  
  }

  renderKeywords() {
    this.state.question.map((item, key) => {
      return (
        <span>{item}</span>
      );
    }); 
  }

  render() {
    return (
      <div>
        <div>blabla</div>
        {this.renderKeywords()}  
      </div>
   );
 }
}
React.render(<Application />, document.getElementById('app'));

我经常遇到错误

Warning: Each child in a list should have a unique "key" prop.  Check the render method of `MyComponent`.

在反应中。错误消息总是告诉您有问题的组件，而不是有问题的特定 HTML 标记/虚拟 DOM 元素。在包含有时大型组件的大型代码库中工作，这使得查找错误源变得非常困难。

是什么导致了这个错误？我正在寻找一个明确的清单。

• 数组中带有“key”属性的标签完全丢失（非常确定）
• 数组中的两个标签具有相同的“key”属性值？（我认为对此有不同的错误消息）

并排编写的两个元素（例如<div></div><div></div>）算作“列表中的子元素”吗？它们也会导致错误吗？

找到攻击性标签的有效策略是什么？

• key={Math.random()}一个一个地添加到组件中的每个无钥匙标签，直到错误消失，然后查看您最后添加的那个。（可能很耗时，有时不起作用）
• 按时间顺序撤消更改，直到错误消失。（可能很耗时）
• 这里有更好的东西

我正在寻找一个彻底和规范的答案。

    var divArr = [
       '<div>????</div>',
       '<div>???</div>',
    ];
    ReactDOM.render(
       <div>{divArr}</div>,
       document.getElementById("example")
    );

但这是错误的:

警告:数组或迭代器中的每个子节点都应该具有唯一的"键"支柱.使用查看顶级渲染调用.有关详细信息,请参阅[warning-keys] [1].

我不知道如何插入'键'

p标签中key属性的功能是什么？我检查了dom,我希望看到taco列表中每个元素的p标签<p taco-1>,但它只是<p>.任何解释将非常感激.

{this.props.tacos.map( ( taco, i ) => {
    return <p key={ `taco-${ i }` }>{ taco }</p>;
})}