小编Níc*_*nte的帖子

我在将路由中的解析参数注入控制器时遇到问题.我正在为对象设置解析值{name: 'Banner', slug: 'banner'},但是我收到错误.

App.js

var app = angular.module('CMS', ['fields', 'ngRoute']);

app.controller('ModuleController', ['$http', 'properties',
  function($http, properties) {
    var module = this;
    module.properties = properties;

    if (module.properties.slug.length) {
      $http.get(module.properties.slug + '.php').success(function(data) {
        module.list = data;
      });
    }
  }
]);

app.controller('HomeController', function() {});

app.config(function($routeProvider) {
  $routeProvider
  // route for the banner page
  .when('/banner1', {
    templateUrl: 'banner1.php',
    controller: 'ModuleController',
    resolve: {
      properties: function() {
        return { name: 'Banner', slug: 'banner' };
      }
    }
  })
  .when('/home', {
    templateUrl: 'home.php',
    controller: 'HomeController'
  }) …

我很难理解 ReactJS 中的以下情况。

我在两个按钮之间有条件渲染：基本上，一个按钮显示另一个按钮。第二个按钮是提交类型，两个按钮都位于表单内。当我单击第一个按钮来显示/呈现第二个按钮时，根据我的理解，它应该只显示第二个按钮，而不是自动提交表单。

我用 create React 应用程序重现了这个案例：

function App() {
    const [showSubmit, setShowSubmit] = useState(false);

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <form method="POST" action="#">
                    {showSubmit ? (<button type="submit">Send</button>)
                    :
                    (<button type="button" onClick={() => setShowSubmit(true)}>
                        Show Submit
                    </button>)}
                </form>
            </header>
        </div>
    );
}

如果我只想显示/渲染提交按钮，为什么 ReactJS 会自动触发提交事件？

我正在研究 React hooks 并在代码中插入一些控制台日志，以更好地理解渲染流程。然后我开始模拟发送相同值的 setState 效果，看看 React 是否会再次渲染它。

import { useState } from "react";

function ManComponent() {
  /* States */
  const [shirt, setShirt] = useState("Blue Shirt");
  console.log("Rendering man with "+shirt);
  
  /* Actions */
  const changeShirt = (newShirt) => {
    console.log("[Man] Changing shirt from "+shirt+" to "+newShirt);
    setShirt(newShirt);
  };
  
  
  return (
    <div>
      <p>The man is using: {shirt}</p>
      
      <div>
        <button onClick={() => changeShirt("Red Shirt")}>Change to red shirt</button>
        <button onClick={() => changeShirt("Blue Shirt")}>Change to blue shirt</button>
      </div>
    </div>
  );
}

export default function …