Question

react-tippy组件出现问题。我想以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))".

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

这也是一个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的组件时，一切正常。但是我真的不知道如何解决它。你能帮我吗？

Answer 1

如错误消息所述：在创建商店的地方找到根组件。（在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
})

如何以react-tippy将HTML props中的组件连接到redux形式

1 个答案: