React-對象作為React子對象無效

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子對象無效（找到：帶有鍵{}的對象）。 如果要渲染子級集合，請改用數組。

我擔心的是，我能夠傳遞運行中的屬性的值，但傳遞屬性失效的值時會發生錯誤。 這里的問題是什么，傳遞兩個屬性的值有什么區別？

Answer 1

您的功能組件將props作為第一個參數。

對象解構應該是這樣的

<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>

Answer 2

您在傳遞道具時忘了放大括號； 它應該是：

function StopWatch({ running, lapse })