Javascript 访问.jsx元素内部的状态

如果我有这样一个元素：

const CardWebView = () => {
  const url = 'xxx';

  return (
    <WebView
    source={{
      uri: url,
    }}
    onNavigationStateChange={this.onNavigationStateChange}
    startInLoadingState
    javaScriptEnabled
    style={{ flex: 1 }}
  />
  );
};

constcardwebview=（）=>{
常量url='xxx'；
返回(
);
};

例如，如何使用

state

更改

url

---

我尝试了

var url=this.state.url

，但这给了我一个错误。代码的这一特定部分使用箭头函数，我对它们不太熟悉。

您需要使用render方法定义React.Component。如果不在组件中，则不能具有状态

const CardWebView = <CardWebView />

class CardWebView extends React.Component{
  constructor(props) {
     super(props);
     this.state = {url: 'xxx'};
  }

  render() {
    return (
      <WebView
      source={{
        uri: this.state.url,
      }}
      onNavigationStateChange={this.onNavigationStateChange}
      startInLoadingState
      javaScriptEnabled
      style={{ flex: 1 }}
    />
    );
  }
};

const-CardWebView=
类CardWebView扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={url:'xxx'}；
}
render（）{
返回(
);
}
};

如果要使用功能组件的状态，需要使用

它使用起来相当简单，只需定义初始值、更改它的回调以及状态变量的名称，就可以了。然后，您可以随时使用回调来更改状态变量

一个简单的例子：

import React, { useState } from 'react';
import { Text, View } from 'react-native';

const App = () => {

  const [url, setUrl] = useState('something')

  return (
    <View>
      <Text>{url}</Text>
      <Text onPress={() => setUrl('something new')}>Click me</Text>
    </View>
  );
}

export default App;

import React，{useState}来自“React”；
从“react native”导入{Text，View}；
常量应用=（）=>{
const[url，setUrl]=useState（'something'）
返回(
{url}
setUrl（'somethinew'）}>单击我
);
}
导出默认应用程序；

您应该在功能组件上使用React钩子-

import React，{useState}来自“React”；
函数示例（）{
//声明一个新的状态变量，我们称之为“count”
const[count，setCount]=useState（0）；
返回(
您单击了{count}次

设置计数（计数+1）}>
点击我
);
}

这是功能组件，因此没有

这个。状态

您应该在functional component@AbdulsametKurt上使用React hook感谢您让我了解功能组件和React hook。我只是改变了它，使它不再是一个功能组件。这可能不是每个人都可以选择的，所以把它作为一个答案，我会接受的。你可以使用react钩子，特别是useState钩子：我知道，但他说他不想使用钩子，他改变了问题，使它不再是一个功能组件

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}