Question

如何在React

中的components函数中传递多个参数

 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中的组件函数中传递多个参数

2 个答案: