如何在 React 的组件函数中传递多个参数

Question

 function Ads(product_title, description) {
    return(
      <div className = "row" id="user-ads">
     <div className = "col-sm-6 col-md-5">
      <div className = "thumbnail">
      <img src = "img/img1.jpg" alt = "Generic placeholder thumbnail" />
      </div>
      <div className = "caption">
      <div className="border">
         <h3>{product_title.title}</h3>
         <p>{description.desc}</p>  
            <button className = "btn btn-primary" role = "button" data-toggle="modal" data-target="#view-detail">View Details
            </button>  
              </div>
                </div>
                  </div>
                    </div>
      );

}

ReactDOM.render(<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/>, document.getElementById('ads'));

上面的代码只取第一个参数的值

Answer 1

在您提供的示例中，product_title.desc 应该具有您要查找的值。当您调用 <Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/> 时，title 和 desc 都将作为对象的属性传递给您的组件函数，因此两者都将在您的函数中可用，且名称为第一个您指定的参数，在您的情况下是 product_title.

Answer 2

无状态 React 组件只接收一个参数，一个包含所有道具的对象：

function Ads(props) {
  // access props.title
  //        props.desc

  // ...
}

如果你 look at what the JSX is actually converted to:

也许这会变得更明显

// Before:
<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/>
// After:
React.createElement(
  Ads,
  { title: "PlayStation 4", desc: "Lorem ipsum jipsum Lorem ipsum jipsum" }
);

一种常见的模式是使用 destructuring 来直接访问道具：

function Ads({title, desc}) {
  // ...
}

如何在 React 的组件函数中传递多个参数

How to pass more than one argument in component function in React

html

javascript

jsx

reactjs