[英]How to connect component in html props in react-tippy to redux form
I have got a problem with react-tippy component. 我对react-tippy组件有问题。 I would like to pass in html props react component with redux form, but I receive an error like this: 我想以redux形式传递html props react组件,但收到如下错误:
Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(AssignDriverForm))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Form(AssignDriverForm))".
Here is code of react tippy component: 这是react tippy组件的代码:
class AssignDriverToolTip extends Component {
state = { open: false }
setIsOpen = () => this.setState({ open: true });
setIsClose = () => this.setState({ open: false });
render() {
return (
<CustomTooltip
theme="light"
open={this.state.open}
arrow={false}
html={(
<AssignDriverForm/>
)}
position='right'
trigger="click" >
<CustomButton infoSmallWithIcon onClickHandler={() => this.setIsOpen()}>
<SVGComponent icon="pen" color="white" width="12px" height="12px" />
{strings.assignDriver}
</CustomButton>
</CustomTooltip>
)
}
}
export default AssignDriverToolTip;
And also here is an AssignDriverForm component: 这也是一个AssignDriverForm组件:
class AssignDriverForm extends Component {
handleSubmit = (data) => {
console.log(data);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<Field
name="message"
type="textarea"
autoComplete="off"
component="textarea" />
</form>
)
}
}
AssignDriverForm = reduxForm({
form: 'assignDriver'
})(AssignDriverForm)
export default AssignDriverForm;
When I change it to component without redux-form everything works fine. 当我将其更改为没有redux-form的组件时,一切正常。 But I really dont know how to fix it. 但是我真的不知道如何解决它。 Could you help me ? 你可以帮帮我吗 ?
As the error message says: find the root component where you create your store. 如错误消息所述:在创建商店的地方找到根组件。 (Something like this in index.jx) (在index.jx中类似这样)
const store = createStore(reducer)
Then make sure you wrap your component in the <Provider>
wrapper. 然后确保将组件包装在<Provider>
包装器中。
// render app
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
)
Redux form uses a normal Redux store, so somewhere you need to add that reducer to your main reducer. Redux表单使用普通的Redux存储,因此您需要在某个地方将该Reduce添加到您的主Reduce中。 You may have something like this: 您可能会遇到以下情况:
// combine reducers
const reducer = combineReducers({
myReducer,
...
form: formReducer // for redux-form
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.