Question

我想制作一个带有增量，减量和添加计数器按钮的计数器应用程序。但是添加计数器功能不起作用。显示此错误：

分析错误：相邻的JSX元素必须包装在一个封闭的标记中。您是否想要JSX片段<> ...

我已经尝试将其包含在标签中，但仍无法正常工作。

import React,{Component} from 'react';
import './App.css';


export class App extends Component {
  state={
    count:0,
  }

  increment=()=>{
    this.setState({ count: this.state.count + 1 });
  }

  decrement=()=>{
    this.setState({ count: this.state.count - 1 });
  }

  addCounter=()=>{

        <span><button onClick={this.increment}>+</button></span>

         <span>{this.state.count}</span>
         <span><button onClick={this.decrement}>-</button></span>


  }

  render() {
    return (
      <div className="App">


      <button onClick={this.addCounter}>Add Counter</button>
      </div>



    )
  }
}




export default App;

添加计数器功能应在前一个计数器的下方添加另一个计数器。

Answer 1

基本上提取一个Counter组件。

然后让您的App维护Counter组件的列表。

// Counter Component
export class Counter extends React.Component {
  state = {
    count:0,
  }

  increment=()=>{
    this.setState({ count: this.state.count + 1 });
  }

  decrement=()=>{
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <span><button onClick={this.increment}>+</button></span>
        <span>{this.state.count}</span>
        <span><button onClick={this.decrement}>-</button></span>
      </div>
    );
  }
}

// App Component
export class App extends React.Component {
  state = {
    counters: [], // additional state for Counter components
  }

  addCounter = () => {
    this.setState({
      counters: [
        ...this.state.counters,
        Counter
      ]
    })
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.addCounter}>Add Counter</button>
        { this.state.counters.map((Counter, index) => (
           <Counter key={index} />)
        )}
      </div>
    )
  }
}

Demo

Answer 2

您只是添加了更多的跨度和按钮，但引用的是同一计数器。

state={
  i : 0,
  count:0,
}
var newCount="counter"+this.state.i;
this.setState({
 i : this.state.i+1,
})
this.setState({
  count: {
     ...this.state.count,
     newCount: 0
  }
});

因此，您需要添加一个带有递增自动递增编号的新计数器。

Answer 3

您必须添加另一个功能组件，而不是添加JSX。 DEMO

import React from 'react';
const counter = (props) => {
   return (
      <div>
         <span><button onClick={() => props.increment(props.index)}>+</button></span>
             <span>{props.count}</span>
         <span><button onClick={() => props.decrement(props.index)}>-</button></span>
      </div>
   )
}    
export default counter;

以及您的主要App组件

import React, {Component} from 'react';
import Counter from './Counter';
import './App.css';


export class App extends Component {
  state={
     counters: []
  }

  valueChanger = (index, inc) => {
     this.setState((prevState) => {
        const counters = prevState.counters.slice();
        counters[index] += inc; 
        return {
            counters: counters
        }
     });
  }

  increment=(index)=>{
     this.valueChanger(index, 1);
  }

  decrement=(index)=>{
     this.valueChanger(index, -1);
  }

  addCounter=()=>{
     this.setState((prevState) => { 
        return { counters: [...prevState.counters, 0] }
     });
  }

  render() {
    let counterElems = this.state.counters.map((c, index) => {
       return <Counter key={index} index={index} increment={this.increment} decrement={this.decrement} count={c} />
    });

    return (
      <div className="App">
          {counterElems}
          <button onClick={this.addCounter}>Add Counter</button>
      </div>
    )
  }
}

export default App;

Answer 4

您的“计数器”需要是一个具有其自身状态的React组件，您拥有的每个“计数器”将使用App中相同的组件状态。您也不会保存返回的JSX以便随后在任何地方渲染。

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div> // <-- React components can return only a single node*
      <span>
        <button onClick={() => setCount(count + 1)}>+</button>
      </span>
      <span>{count}</span>
      <span>
        <button onClick={() => setCount(count - 1)}>-</button>
      </span>
    </div>
  );
};

class App extends Component {
  state = {
    counters: []
  };

  addCounter = () => {
    this.setState(prevState => ({
      counters: [...prevState.counters, <Counter />]
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.addCounter}>Add Counter</button>
        {this.state.counters}
      </div>
    );
  }
}

* React render lifecycle function可以渲染数组。

Answer 5

我认为这是您想要做的。

const { useState } = React;
function App(){
  const [counter, setCounter] = useState([]);
  
  function addCounter(){
    setCounter(counter.concat({id: counter.length, count: 0}));
  }
  function increase(id){
    setCounter(counter.map(el=>{
      if(el.id === id){
        el.count++;
      }
      return el;
    }));
  }
  function decrease(id){
    setCounter(counter.map(el=>{
      if(el.id === id){
        el.count--;
      }
      return el;
    }));
  }
  return (
    <div className="App">
      <button onClick={addCounter}>Add Counter</button>
      {
        counter.map(el=>{
          return(
            <div key={el.id}>
              <span>Counter #{el.id}</span>
              <div>
                <button onClick={()=>{increase(el.id)}}>+</button>
                <span>{el.count}</span>
                <button onClick={()=>{decrease(el.id)}}>-</button>
              </div>
            </div>
          )
        })
      }
    </div>
  )
}

ReactDOM.render(
  <App />, document.getElementById('root')
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

无法在反应中添加多个计数器

5 个答案: