代码之家 › 专栏 › 技术社区 › ubermo

如何在React本机自定义组件中使用状态?

react-native reactjs javascript

ubermo · 技术社区 · 2 年前

我正在尝试创建一个计数器应用程序,其中某些卡要么+1要么-1。当点击键盘上的每个数字时,计数器递增+1或-1。到目前为止,我已经创建了一个自定义组件,并尝试使用状态来

export default function App() {

  const cards = [
    { card: "A", count: -1 },
    { card: "K", count: -1 },
    { card: "Q", count: -1 },
    { card: "J", count: -1 },
    { card: 10, count: -1 },
    { card: 9, count: 0 },
    { card: 8, count: 0 },
    { card: 7, count: 0 },
    { card: 6, count: 1 },
    { card: 5, count: 1 },
    { card: 4, count: 1 },
    { card: 3, count: 1 },
    { card: 2, count: 1 },
  ];


  const [currentCount, setCount] = useState(0); //Count <<

  return (
    <View style={styles.app}>
      <CardCount useState={currentCount}/> // Custom component <<
      <View style={styles.cards}>
      {cards.map((index) =>(<Card item={index}/>))}
      </View>
    </View>
  );
}

The custom component 

export const CardCount = ({currentCount}) => {
  return (
    <Text>{currentCount}</Text>
  )
}

我没有看到任何结果?除非我用错了状态

2 回复 | 直到 2 年前

Secret Keeper 2 年前

export const CardCount = ({useState}) => {
  return (
    <Text>{useState}</Text>
  )
}

Turtle 2 年前

<CardCount useState={currentCount}/>

这行代码表示CardCount组件道具由一个具有useState属性的对象组成。

export const CardCount = ({currentCount}) => {

您实际期望的是currentCount->您必须编写currentCount={currentCount},而不是useState={currentCount};第一个currentCount是指CardCount组件期望作为道具的属性。第二个currentCount是指父组件中的状态变量。

这将始终显示默认值0。

callback ,将此函数作为道具添加到卡中,然后在卡上创建onClick事件,该事件调用具有某些值的道具回调。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前