<function prop =“ Hello”>和{function（“ H​​ello”）}之间的区别

Question

我目前正在学习React，我不知道何时应该使用这些，什么时候不应该使用？我看过一些教程，人们似乎可以互换使用它们。因此，我想知道它们之间有什么区别，以及我何时或不应该使用它们。

例如，假设名为“函数”的组件在调用后返回<div>Hello</div>，则可以得到以下代码。

import {function} from './component';

class X extends React.Component{

   render(){
      return(
         <div>
            <function Props1="Hello"/>
         </div>
      )
   }
}

接下来，我相信也可以包含以下代码，如果我输入错了，请纠正我

import {function} from './component';

class X extends React.Component{

   render(){
      return(
         <div>
            {function("Hello")}
         </div>
      )
   }
}

在ReactJS中似乎有两种方法可以做完全相同的事情？有什么理由应该让我一个人使用吗？

Answer 1

当您像<function Props1="Hello"/>那样渲染它时，React将创建一个props对象，并带有传递给它的属性和值对。

当您将其渲染为{function("Hello")时，您的props参数将为字符串“ Hello”。

请参见下面的代码段

function App() {
  return(
    <React.Fragment>
      <Component1
        props1="hello"
      />
      {Component2("hello")}
    </React.Fragment>
  );
}

function Component1(props) {
  return(
    <React.Fragment>
      Component1
      <div>Props: {JSON.stringify(props)}</div>
      <br/>
    </React.Fragment>
  );
}

function Component2(props) {
  return(
    <React.Fragment>
      Component2
      <div>Props: {JSON.stringify(props)}</div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 2

区别在于，第一种情况是有状态组件，因此道具必须通过类似您的情况的传递

  

Props1 =“”

然后在函数组件（在这种情况下为有状态）中，您可以通过this.props.Props1来访问道具

在第二种情况下，它是功能组件，因此您可以访问它，例如：

class X extends React.Component{

   render(){
      return(
         <div>
            {function("Hello")}
         </div>
      )
   }
}


function function(myprop) {
  return <div>{myprop}</div>
}