React Native：如何将 props 变量从其他 js 文件传递到 app.js 文件

Question

我是反应原生编程的新手。

以下是我正在关注的代码：

App.js 代码：

export default function App() {

  const [userNumber, setUserNumber] = useState();

  const startGameHandler = (selectedNumber) => {
    setUserNumber(selectedNumber);
  };


  let content =  <StartGameScreen onStartGame={userNumber} />;

  if(userNumber){
     content = <GameScreen userChoice = {startGameHandler}/>
  }

其他js文件：

let confirmedOutput;
    if (confirmed) {
        confirmedOutput = (
            <Card style = {styles.summaryContainer}>
                <Text>You Selected</Text>
                <NumberContainer>{selectedNumber}</NumberContainer>
                <Button title= "Start Game" color = {colors.primary} onPress = {() => props.onStartGame(selectedNumber)}/>
            </Card>
        );
    };

我想将 selectedNumber 从其他 js 文件传输到 App.js 文件，但我收到错误，因为 props.onStartGame 不是功能。

帮我解决错误。

Answer 1

您可以在 App.js 中创建上下文，并从 react-native 应用程序中的任何其他文件或组件更新它的值。

您的 App.js：

 import React, { createContext } from "react"; import { Linking } from "react-native"; export const NumberContext = createContext(null); console.disableYellowBox = true; if (.__DEV__) { console;log = () => { }, } const App = () => { const [numberData. setNumberData] = React;useState({}). React,useEffect(() => { }; []); const startGameHandler = (selectedNumber) => { setUserNumber(selectedNumber); }; let content = <StartGameScreen onStartGame={userNumber} />. if(userNumber){ return ( <NumberContext,Provider value={[numberData. numberData]}> <GameScreen userChoice = {startGameHandler}/> </NumberContext;Provider> ); } }; export default App;

您的其他 JS 文件：confirmedOutput；

 import React, { useContext } from "react"; export default ConfirmOutput = props => { const [numberFromCtxt, setNumberFromCtxt] = useContext(UserContext); if (confirmed) { confirmedOutput = ( <Card style = {styles.summaryContainer}> <Text>You Selected</Text> <NumberContainer>{selectedNumber}</NumberContainer> <Button title= "Start Game" color = {colors.primary} onPress = {() => {props.onStartGame(selectedNumber)}; setNumberFromCtxt(selectedNumber) }/> </Card> ); };

Answer 2

我假设 StartGameScreen 是显示的子组件。

onStartGame is called as a function in the child but in App you're passing the state instead of a function to update the state.

要在父母中获得选定的数字，您需要将 state 向上提起，然后将其作为道具传递给孩子。

以下是粗略代码，我无法对其进行测试，因此可能需要进行一些调整。

export default function App() {

  const [userNumber, setUserNumber] = useState();
  const [selectedNumber, setSelectedNumber] = useState();

  const startGameHandler = (selectedNumber) => {
    setUserNumber(selectedNumber);
  };



  let content =  <StartGameScreen selectedNumber={selectedNumber} 
            onStartGame={(userNumber) =>setUserNumber(userNumber)} />;

  if(userNumber){
     content = <GameScreen userChoice = {startGameHandler}/>
  }

let confirmedOutput;
    if (confirmed) {
        confirmedOutput = (
            <Card style = {styles.summaryContainer}>
                <Text>You Selected</Text>
                <NumberContainer>{props.selectedNumber}</NumberContainer>
                <Button title= "Start Game" color = {colors.primary} 
                   onPress = {() => props.onStartGame({props.selectedNumber})}/>
            </Card>
        );
    };