好吧，我正式花了几个小时试图弄清楚这一点，但我敢肯定它的一个简单的修补程序。我是全新的作出反应，并努力创造Plotly短跑的自定义组件。
我试图更新LoginForm组件，它利用了格纹链接的任何人所熟悉的令牌属性。您将在handleOnSuccess我能够检索令牌，并在控制台中显示它的LoginForm.react.js功能通知。所有我想要做的就是更新控制台中显示该值的token的LoginForm财产。
下面是整个LoginForm.react.js：
import React, { Component } from 'react';
import Script from 'react-load-script';
import PropTypes from 'prop-types';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
linkLoaded: false,
initializeURL: 'https://cdn.plaid.com/link/v2/stable/link-initialize.js',
};
this.onScriptError = this.onScriptError.bind(this);
this.onScriptLoaded = this.onScriptLoaded.bind(this);
this.handleLinkOnLoad = this.handleLinkOnLoad.bind(this);
this.handleOnExit = this.handleOnExit.bind(this);
this.handleOnEvent = this.handleOnEvent.bind(this);
this.handleOnSuccess = this.handleOnSuccess.bind(this);
this.renderWindow = this.renderWindow.bind(this);
}
onScriptError() {
console.error('There was an issue loading the link-initialize.js script');
}
onScriptLoaded() {
window.linkHandler = window.Plaid.create({
apiVersion: this.props.apiVersion,
clientName: this.props.clientName,
env: this.props.env,
key: this.props.publicKey,
onExit: this.handleOnExit,
onLoad: this.handleLinkOnLoad,
onEvent: this.handleOnEvent,
onSuccess: this.handleOnSuccess,
product: this.props.product,
selectAccount: this.props.selectAccount,
token: this.props.token,
webhook: this.props.webhook,
});
console.log("Script loaded");
}
handleLinkOnLoad() {
console.log("loaded");
this.setState({ linkLoaded: true });
}
handleOnSuccess(token, metadata) {
console.log(token);
console.log(metadata);
}
handleOnExit(error, metadata) {
console.log('link: user exited');
console.log(error, metadata);
}
handleOnLoad() {
console.log('link: loaded');
}
handleOnEvent(eventname, metadata) {
console.log('link: user event', eventname, metadata);
}
renderWindow() {
const institution = this.props.institution || null;
if (window.linkHandler) {
window.linkHandler.open(institution);
}
}
static exit(configurationObject) {
if (window.linkHandler) {
window.linkHandler.exit(configurationObject);
}
}
render() {
return (
<div id={this.props.id}>
{this.renderWindow()}
<Script
url={this.state.initializeURL}
onError={this.onScriptError}
onLoad={this.onScriptLoaded}
/>
</div>
);
}
}
LoginForm.defaultProps = {
apiVersion: 'v2',
env: 'sandbox',
institution: null,
selectAccount: false,
style: {
padding: '6px 4px',
outline: 'none',
background: '#FFFFFF',
border: '2px solid #F1F1F1',
borderRadius: '4px',
},
};
LoginForm.propTypes = {
// id
id: PropTypes.string,
// ApiVersion flag to use new version of Plaid API
apiVersion: PropTypes.string,
// Displayed once a user has successfully linked their account
clientName: PropTypes.string.isRequired,
// The Plaid API environment on which to create user accounts.
// For development and testing, use tartan. For production, use production
env: PropTypes.oneOf(['tartan', 'sandbox', 'development', 'production']).isRequired,
// Open link to a specific institution, for a more custom solution
institution: PropTypes.string,
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: PropTypes.string.isRequired,
// The Plaid products you wish to use, an array containing some of connect,
// auth, identity, income, transactions, assets
product: PropTypes.arrayOf(
PropTypes.oneOf([
// legacy product names
'connect',
'info',
// normal product names
'auth',
'identity',
'income',
'transactions',
'assets',
])
).isRequired,
// Specify an existing user's public token to launch Link in update mode.
// This will cause Link to open directly to the authentication step for
// that user's institution.
token: PropTypes.string,
// Set to true to launch Link with the 'Select Account' pane enabled.
// Allows users to select an individual account once they've authenticated
selectAccount: PropTypes.bool,
// Specify a webhook to associate with a user.
webhook: PropTypes.string,
// A function that is called when a user has successfully onboarded their
// account. The function should expect two arguments, the public_key and a
// metadata object
onSuccess: PropTypes.func,
// A function that is called when a user has specifically exited Link flow
onExit: PropTypes.func,
// A function that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad: PropTypes.func,
// A function that is called during a user's flow in Link.
// See
onEvent: PropTypes.func,
// Button Styles as an Object
style: PropTypes.object,
// Button Class names as a String
className: PropTypes.string,
};
export default LoginForm;
这里是App.js：
// /* eslint no-magic-numbers: 0 */
import React, { Component } from 'react';
import { LoginForm } from '../lib';
class App extends Component {
constructor(props) {
super(props);
this.state = {
token: null
}
}
render() {
return (
<LoginForm
id="Test"
clientName="Plaid Client"
env="sandbox"
product={['auth', 'transactions']}
publicKey="7a3daf1db208b7d1fe65850572eeb1"
className="some-class-name"
apiVersion="v2"
token={this.state.token}
>
</LoginForm>
);
}
}
export default App;
我认为，有必要防止对LoginForm即token={this.someFunction}性能的任何功能的分配是不能接受的
我也知道，这是不可取的（如果它甚至有可能），以this.props.token=token插入直接更改属性的值，即顺理成章地进入了handleOnSuccess功能可能工作（逻辑 - 我知道事实并非如此），但仍然无法真正提供更新父进程和子进程之间分量的声音流。
我明白任何及所有的帮助，因为这简直是在这个小项目中的最后一步，我真的不能弄明白。提前致谢！
如果它可以更容易 - 你可以在这里克隆回购：https://github.com/SterlingButters/plaidash
是你靠近 - 你需要的是在updateToken组件，它使用App定义一个this.setState功能。
通过updateToken用作道具LoginForm。该LoginForm组件应调用handleOnSuccess此功能。
在App.react.js：
// pass this function as prop to LoginForm.
// don't forget to bind to 'this'.
updateToken(token, metadata) {
...
this.setState({ token })
}
...
// in render function
<LoginForm updateToken={updateToken} ... />
在LoginForm.react.js：
handleOnSuccess(token, metadata) {
this.props.updateToken(token, metadata)
}
你避免分配给props完全正确。用这种方法，你委托更新道具回父的责任，并确保国家和更新功能（S）住在同一个组件。
你可以在应用程序，你传下去为道具，以LoginForm的一个handleUpdateToken方法：
class App extends Component {
...
handleUpdateToken(token) {
this.setState({ token });
}
...
render() {
return (
<LoginForm
onUpdateToken={this.handleUpdateToken}
...other LoginForm props
/>
}
}
在LoginForm的：
handleOnSuccess(token, metadata) {
console.log(token);
console.log(metadata);
this.props.onUpdateToken(token);
}