Question

我正在尝试在反应式js上创建秒表。下面是我的代码

<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
<script type="text/babel">
function StopWatch(running, lapse) {
  const buttonStyles = {
    border: "1px solid #ccc",
    background: "#fff",
    fontSize: "2em",
    padding: 15,
    margin: 5,
    width: 200
  };
  return (
    <div>
      <label
        style={{
          fontSize: "5em",
          display: "block"
        }}
      >
        {lapse}ms
      </label>

      <button style={buttonStyles}>{running ? "stop" : "start"}</button>
      <button style={buttonStyles}>Clear</button>
    </div>
  );
}
const rootElement = document.getElementById("root");
const element = <StopWatch running={true} lapse={0} />;
ReactDOM.render(element, rootElement);
</script>

在执行上述文件时，我收到错误消息：

未捕获的不变变量：对象作为React子对象无效（找到：带有键{}的对象）。如果要渲染子级集合，请改用数组。

我担心的是，我能够传递属性正在运行的值，但是在传递属性 lapse 时会发生错误。这里的问题是什么，传递两个属性的值有什么区别？

Answer 1

您的功能组件将props作为第一个参数。

object destructuring应该是这样的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Answer 2

您在传递道具时忘了放大括号；应该是：

function StopWatch({ running, lapse })

React-对象作为React子对象无效

2 个答案: