Javascript 如何在React standalone中使用React挂钩？_Javascript_Reactjs_React Hooks

Javascript 如何在React standalone中使用React挂钩？

javascript reactjs

Javascript 如何在React standalone中使用React挂钩？,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我试图在独立的UMD环境中使用React钩子。我得到下面的错误未捕获不变违反：缩小反应错误#307 错误指向了我在这种情况下如何使用挂钩？下面是我的代码： index.html <!DOCTYPE html>  <!--[if IE 7]> <html cla

我试图在独立的UMD环境中使用React钩子。我得到下面的错误

未捕获不变违反：缩小反应错误#307

错误指向了我

在这种情况下如何使用挂钩？下面是我的代码：

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>React Hooks</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="root"></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
        <script src="App.js" async defer></script>
    </body>
</html>

添加到你的应用程序中。然后你可以使用jsx和所有其他东西，你也需要这样做

如果功能组件使用挂钩，则不能直接调用它们<代码>createElement应用于所有组件：

return React.createElement(
    'div',
    {className: 'counter'},
    React.createElement(CounterText, {count: 0}),
    React.createElement(ButtonCounter)
);

您错误地渲染了

计数器

组件，需要在

ReactDOM.render

中使用

React.createElement

进行渲染。此外，即使您将ButtonCounter和CounterText传递给React.createElement，该应用程序也会工作

return React.createElement(
    'div',
    {className: 'counter'},
    CounterText({count: count}),
    ButtonCounter({clickHandler: updateCount})
);

最好通过创建子元素中的React元素来传递子元素，以便React可以对其进行优化。当

计数器文本

和

按钮计数器

还包含来自React的一些逻辑时，这一点尤为重要

您还可以将状态和处理程序作为工作应用程序的道具传递给这些组件

var CounterText=函数（道具）{
返回React.createElement(
"div",，
无效的
`你点击了${props.count}次`
);
}
var按钮计数器=功能（道具）{
返回React.createElement(
“按钮”，
{className:'btn'，onClick:props.clickHandler}，
`点击我`
);
}
var计数器=函数（）{
var state=React.useState（0）；
变量计数=状态[0]；
var setCount=状态[1]；
var updateCount=（）=>{
setCount（计数=>count+1）
}
返回React.createElement(
"div",，
{className:'counter'}，
createElement（计数器文本，{count:count}），
createElement（ButtonCounter，{clickHandler:updateCount}）
);
}
ReactDOM.render(
React.createElement（计数器），
document.getElementById（'root'））
);

反应钩
这里有两个问题，您不应该像以下那样调用组件：
Counter()

React将自己完成（惰性计算），因此您还需要使用createElement
包装它
例如：
ReactDOM.render(
  React.createElement(Counter),
  document.getElementById('root')
);

另一件事，您没有真正使用count
和setCount
：
return React.createElement(
        'div',
        {className: 'counter'},
        CounterText({count: 0}),
        ButtonCounter({})
    );

下面是一个运行示例：
var CounterText=函数（道具）{
返回React.createElement(
"div",，
无效的
`你点击了${props.count}次`
);
}
var按钮计数器=功能（道具）{
返回React.createElement(
“按钮”{
类名：“btn”，
onClick:props.clickHandler
},
`点击我`
);
}
var计数器=函数（）{
var state=React.useState（0）；
变量计数=状态[0]；
var setCount=状态[1]；
返回React.createElement(
"div",{
类名：“计数器”
},
React.createElement（CounterText{
计数：计数
}),
createElement（ButtonCounter，{clickHandler:（）=>setCount（c=>c+1）}）
);
}
ReactDOM.render(
React.createElement（计数器），
document.getElementById（'root'））
);


return React.createElement(
        'div',
        {className: 'counter'},
        CounterText({count: 0}),
        ButtonCounter({})
    );