Question

我是React的新手，所以我的问题很容易解决。我制作了简单版本的代码来说明我的问题。

class ReactComponent extends Component {
    addToken(token){
        this.props.actionAddODToken(token);
    }

    render(){
        return (
        <div>
          <h1>this.props.token</h1>
        </div>
        )
    }
}

function mapStateToProps(state){
    return {addOneDriveToken: state.addOneDriveToken}
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({...boundActionCreators}, dispatch);
}

function sendToComponent(data) {
    let data ="some string data";
}

export default connect(mapStateToProps, mapDispatchToProps)(AddDrive);

不幸的是，sendTo Component是全局函数，因为我从子弹出窗口获取数据。

window.opener.sendToComponent(data);

在ReactComponent渲染后，sendToComponent触发。所以我的问题是如何将数据从函数发送到组件

Answer 1

您正在使用Redux，因此＆＃34;正确＆＃34;方法是将数据发送到商店，然后使用mapStateToProps进行提取。因此，在您的子弹出窗口中，您需要执行调度操作，而不是使用全局例如。

function ChildPopup({ handleSend }) {
   return (
      <div className='popup'>
          <button onClick={ handleSend }>Send</button>
      </div>
   );
} 

const mapPropsToDispatch = {
    handleSend() {     //this gets turned into a prop in your popup
        return {
            type: "SEND_TO_COMPONENT",
            valueToSendToComponent: "some string data"
        }; //this action will get dispatched to the store and you can handle with a reducer
    }
};

export default connect( undefined, mapPropsToDispatch )( ChildPopup );

Answer 2

我认为你可以为此目的使用事件监听器。 Here对于反应和事件监听器是一个很好的答案。您还可以查看react-event-listener库。

Answer 3

这是非常简化示例，说明如何编写要求用户输入的组件。然后，您可以将其连接到Redux，以便它可以调度正确的操作并将数据存储在Redux状态，这将使数据可用于您想要的任何组件（如果您也连接它）。

＆＃13;

const UserInputFetcher = ({onUserInput}) => {
 getUserInput()
   .then(onUserInput)
   .catch(error => console.log('Ooops, error:', error));
 return <p>Don't mind me. Look in the "console"</p>;
}

const getUserInput = () => {
  return new Promise((resolve, reject) => {
    const userInput = window.prompt('Some input would be nice:');
    if(userInput) {
      resolve({ veryImportantUserData: userInput })
    } else {
      reject(new Error('User refused to give input'));
    }
  });
}

const fakeDispatchOfAction = userInput => {
  console.log('Dispatcing action with payload', userInput);
}

ReactDOM.render(<UserInputFetcher onUserInput={fakeDispatchOfAction} />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

如何从全局函数中获取数据

3 个答案: