Question

“错误按钮”只能使用一次，因为它无法控制与“良好按钮”相同的“值”。我在这里想念什么？

const Test = () => {

  const [value, setValue] = useState(0)
  const [view, setView] = useState()

  const add = () => setValue(value + 1)

  const badButton = () => {
      return (
          <div>
              <button onClick={add}>Bad button</button>
          </div>
      )
  }
  return (
      <div>
          {value}
          <button onClick={add}>Good button</button>
          {view}
          <button onClick={() => setView(badButton)}>show bad button</button>
      </div>
  )
}

感谢您的回复，我将按照建议使用flag方法。但是我仍然想知道为什么在这种原始情况下两个按钮不能以相同的方式工作。

Answer 1

选中此sandbox
我认为这是处理此类用例的正确方法。而不是将组件本身存储在状态中。我将其替换为布尔值。默认情况下，它将是false，并且badButton将被隐藏，单击showBadButton时，我将视图状态设置为true，并且错误按钮将显示在图片中。实际上，这是一个不错的选择。看看。

Answer 2

我将使用view作为标志来显示/隐藏BadButton组件，我创建了一个demo来展示以下代码片段：

import React, { useState } from 'react';
import { render } from 'react-dom';
import './style.css';

const Test = () => {

  const [value, setValue] = useState(0)
  const [view, setView] = useState(false)

  const add = () => setValue(value + 1)

  const BadButton = () => {
      return (
        <button onClick={add}>Bad button</button>
      )
  }

  return (
      <>
          {value}
          <button onClick={add}>Good button</button>
          {view ? BadButton() : null}
          <button onClick={() => setView(!view)}>
            {view ? 'hide' : 'show'} bad button
          </button>
      </>
  )
}

render(<Test />, document.getElementById('root'));

欢迎使用StackOverflow

与React中的共享变量混淆

2 个答案: