首页 文章

如何将react-hppy中的组件与react-tippy连接到redux表单

提问于
浏览 次
1

我遇到了react-tippy组件的问题 . 我想传递html props使用redux表单反应组件，但是我收到如下错误：

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))".

这是反应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;

这里还有一个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;

当我将其更改为没有redux-form的组件时，一切正常 . 但我真的不知道如何解决它 . 你可以帮帮我吗 ？

javascript reactjs redux redux-form

1 回答

  • 0

    如错误消息所示：找到创建商店的根组件 . （在index.jx中有类似的东西）

    const store = createStore(reducer)

    然后确保将组件包装在 <Provider> 包装器中 .

    // render app
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)

    Redux表单使用普通的Redux存储，因此您需要将该reducer添加到主reducer中 . 你可能有这样的事情：

    // combine reducers
const reducer = combineReducers({
  myReducer,
  ...
  form: formReducer // for redux-form
})
    回复于

相关问题