Question

如果我有这样的元素：

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

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

例如，如何使用state来更改url？

我尝试过var url = this.state.url，但这给我一个错误。代码的这一特定部分使用箭头功能，我不太熟悉它们。

Answer 1

您应该在功能组件上使用React Hooks-Using the State Hook – React

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>
  );
}

Answer 2

您需要使用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 }}
    />
    );
  }
};

Answer 3

如果要使用功能组件中的状态，则需要使用useState hook

使用起来非常简单，只需定义初始值，更改它的回调以及状态变量的名称即可进行设置。然后，您可以根据需要使用回调来更改状态变量。

一个简单的例子：

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;

访问.jsx元素内部的状态

3 个答案: