React - 如何在使用功能组件时为 .map 函数传递道具

Question

如何将 props 从 ProductFeatures 传递给 renderFeatures 函数？下面是一个示例代码：

const renderFeatures = (feature) => {
  return (
    <div key={feature.productFeatureTypeId} className="panel panel-default">
      <div className="panel-heading">
        <div className="row row-no-border row-h-10">
          <div className="col-xs-10">
            <a
              className="accordion-toggle"
              data-toggle="collapse"
              href={"#" + feature.productFeatureTypeId}
            >
              <h4 className="panel-title">{feature.productFeatureTypeId}</h4>
            </a>
          </div>
          <div className="col-xs-2 text-right font-size-16">
            <span className="glyphicon glyphicon-circle-arrow-down"></span>
          </div>
        </div>
      </div>

      <div
        id={feature.productFeatureTypeId}
        className="panel-collapse collapse in"
      >
        <div className="panel-body">
          {feature.productFeaturesDescription.map(renderFeatureObjItem)}
        </div>
      </div>
    </div>
  );
};

const ProductFeatures = (props) => {
  let mappedProductFeaturesMembers = getMappedProductFeaturesMembers(
    props.product.productFeatureMembers
  );

  return (
    <div className="panel-group" id="accordion">
      {mappedProductFeaturesMembers.map(renderFeatures)}
    </div>
  );
};

请注意，所有这些代码都在一个名为 ProductFeatures.js 的文件中，我正在使用功能组件。

Answer 1

您可以像这样在 rednerFeatures 中传递它：

const renderFeatures = (feature, props) => { // Accept both feature and props
  return (
    <div key={feature.productFeatureTypeId} className="panel panel-default">
      <div className="panel-heading">
        <div className="row row-no-border row-h-10">
          <div className="col-xs-10">
            <a
              className="accordion-toggle"
              data-toggle="collapse"
              href={"#" + feature.productFeatureTypeId}
            >
              <h4 className="panel-title">{feature.productFeatureTypeId}</h4>
            </a>
          </div>
          <div className="col-xs-2 text-right font-size-16">
            <span className="glyphicon glyphicon-circle-arrow-down"></span>
          </div>
        </div>
      </div>

      <div
        id={feature.productFeatureTypeId}
        className="panel-collapse collapse in"
      >
        <div className="panel-body">
          {feature.productFeaturesDescription.map(renderFeatureObjItem)}
        </div>
      </div>
    </div>
  );
};

const ProductFeatures = (props) => {
  let mappedProductFeaturesMembers = getMappedProductFeaturesMembers(
    props.product.productFeatureMembers
  );

  return (
    <div className="panel-group" id="accordion">
      {mappedProductFeaturesMembers.map(feature => renderFeatures(feature, props))} // Pass props here too
    </div>
  );
};

React - 如何在使用功能组件时为 .map 函数传递道具

React - How to pass props down for the .map function when using functional components

reactjs

react-props

react-functional-component