Question

在下面的代码中，道具'go_to_anchor_link'没有通过。但是，其他2个道具正按预期传递给<ChoosePostType />。

// App.js

// render()
{ ui_store.main_area_sequence === 10 && step1 }

// outside render()
const step1 = (
    <Route
        path="/" exact
        render={() => (
            <ChoosePostType
                ui_store={ui_store}
                message_construction_logic={message_construction_logic}
                go_to_anchor_link={this.go_to_anchor_link}
            />)}
    />
);

go_to_anchor_link = (anchor_id) => {
    const scroll_target = document.querySelector(anchor_id);
    smoothScroll(scroll_target);
    return false;
};

我不能正确传递功能道具吗？

编辑：通过评论请求发布完整的App.js：

import React, { Component } from 'react';
import './App.css';
import {BrowserRouter, Link, Route} from "react-router-dom";
import {configure} from "mobx";
import  {observer} from "mobx-react";

import {UiStore} from './stores/ui_store'
import {MessageConstructionLogic} from "./stores/message_construction_logic";


// required first
import firebase from 'firebase'
import * as firebaseui from 'firebaseui'


import './assets/react-toolbox/theme.css';
import theme                from './assets/react-toolbox/theme.js';
import ThemeProvider        from 'react-toolbox/lib/ThemeProvider';

import {TopNav}              from './components/TopNav'
import {ChoosePostType}      from "./components/ChoosePostType";
import {KeyPhraseSearch}     from "./components/KeyPhraseSearch";
import {QuestionLeads}       from "./components/QuestionLeads";
import {FinalEditsAndCopy}   from "./components/FinalEditsAndCopy";
import {PostForMeButton}     from './components/PostForMeButton';
import {TurnkeyOfferPitch}   from './components/TurnkeyOfferPitch';
import {LoginOptions}        from './components/LoginOptions';
import {AccountManagerSetup} from './components/AccountManagerSetup';

import {QuestionsStep2} from "./views/QuestionsStep2";

const smoothScroll = require("smoothscroll");
// END of IMPORTS


// STATE CONTAINER SETUP & CONFIG

configure( { enforceActions : true } );
const ui_store = new UiStore();
const message_construction_logic = new MessageConstructionLogic();


// FIREBASE SERVICES: Additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Initialize Firebase
var config = {
    apiKey: "AIzaSyBjzGfi_D6g5hWBYGA4VpM0Uqobh3bqNFA",
    authDomain: "social-post-builder.firebaseapp.com",
    databaseURL: "https://social-post-builder.firebaseio.com",
    projectId: "social-post-builder",
    storageBucket: "social-post-builder.appspot.com",
    messagingSenderId: "913308513340"
};
firebase.initializeApp(config);


// FirebaseUI config.
var uiConfig = {
    signInSuccessUrl: '#create-account', // the root of the URL is auto-appended
    signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        // firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
        // firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>',
    // Privacy policy url.
    privacyPolicyUrl: '<your-privacy-policy-url>'
};

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);





// EXTERNAL FUNCTIONS ====================================================

const Test = (props) => {
    return <h1>Header from "Test" component</h1>
};



// APP CLASS ==========================================================

class App extends Component {
    constructor(props) {
        super(props);

        this.go_to_anchor_link = this.go_to_anchor_link.bind(this)
    };



    // FUNCTIONS ===========================================

    go_to_anchor_link = (anchor_id) => {
        const scroll_target = document.querySelector(anchor_id);
        console.log(scroll_target);
        // smoothScroll(scroll_target);

        // var broken_anchor_location = document.location.toString().split('#')[0];
        // document.location = broken_anchor_location + '#' + anchor_id;
        return false;
    };


    // RENDER ===========================================

  render() {
      return (
          <BrowserRouter>
          <ThemeProvider theme={ theme }>
                  <div className="App">
                      <TopNav />



                      {/* MAIN AREA FLOW */}

                      { ui_store.main_area_sequence === 10 && step1 }


                  </div>
          </ThemeProvider>
          </BrowserRouter>

      );
  }
}


// RENDER OBJECTS

const step1 = (
    <Route
        path="/" exact
        render={() => (
            <ChoosePostType
                ui_store={ui_store}
                message_construction_logic={message_construction_logic}
                go_to_anchor_link={this.go_to_anchor_link}
            />)}
    />
);

export default observer(App);

我正在使用MobX来控制主要区域的UI状态。还有另一家商店也正在传递给子组件。

Answer 1

请尝试使用此修改后的代码。我在进行更改的地方发表了评论：

// App.js

// render()
{ ui_store.main_area_sequence === 10 && step1 }

// outside render()
const step1 = (
    <Route
        path="/" exact
        render={() => (
            <ChoosePostType
                ui_store={ui_store}
                message_construction_logic={message_construction_logic}
                go_to_anchor_link={this.go_to_anchor_link} // removed this key word
            />)}
    />
);

const go_to_anchor_link = (anchor_id) => {    // I have put const key word
    const scroll_target = document.querySelector(anchor_id);
    smoothScroll(scroll_target);
    return false;
};

React.js：在同一个类中传递功能道具的问题

1 个答案: