React Javascript 中有没有办法传递道具并在外部导入中使用它？答案

【问题标题】：Is there a way in React Javascript to pass props and use it in external import?React Javascript 中有没有办法传递道具并在外部导入中使用它？
【发布时间】：2019-11-22 13:55:58
【问题描述】：

我想将 props 从一个组件传递到另一个组件，并在第二个组件中使用它来进行组件声明上方的导入

这是为了使用相同的组件，无需创建 4 次，每次使用另一个 SVG。

我正在使用 React、Javascript、Webpack、babel。我还使用 svgr/webpack 从 SVG 图片创建组件，使用 SVG 而不是对我来说至关重要。

import React from 'react';
import RightNavItem from './right_nav_item';

const RightNav = ({navitems}) => {
  const rightNavItems = navitems.map( (item) => {
    return <RightNavItem name={ item }/>
  });

  return(
    <div className="rightnav">
      {rightNavItems}
    </div>
  );
};

export default RightNav;

import React from 'react';

const RightNavItem = ({ name }) => {
  const svgpath = `../../../../resources/img/navbar/${name}.svg`;
  return(
    <div>
      <img src={ svgpath } style={{height: '25px'}}/>
      <span>{ name }</span>
    </div>
  );
};

export default RightNavItem;

而我希望能够做到这一点：

import React from 'react';
import SvgPicture from '../../../../resources/img/navbar/{name}.svg';

const RightNavItem = ({ name }) => {
    return(
      <div>
        <SvgPicture />
        <span>{ name }</span>
      </div>
    );
};

export default RightNavItem;

【问题讨论】：

您可以使用上下文来减少对支柱钻孔的需求：reactjs.org/docs/context.html
我不认为 javascript 支持这样的动态导入。您也许可以在 SvgComponent 的渲染函数中使用 require(path/to/svg)。如果是这样，那么您可以将路径作为道具传递。
查看 create-react-app docs 名为 添加 SVGs 的部分，您没有使用 create-react-app，但您可以了解解决方案
感谢您的帮助，我设法做到了，虽然有点丑陋，但还是做到了。我使用了 {props.children}，而不是使用 map()，而是添加了 4 次，每个都有不同的“SVG”子组件和不同的道具“名称”，这样组件只会在 RightNavItem 初始化等级。我将对解决方案发表评论，希望有人能告诉我如何使用 map() 来做到这一点。再次感谢！！

标签： reactjs svg webpack import babeljs

【解决方案1】：

好的，所以我回去并在我的本地应用程序上实现了整个事情，以获得您所需要的。我正在编辑我的原始答案。希望这能解决您的问题。

父母：

import React from 'react';
import { ReactComponent as svg } from 'assets/img/free_sample.svg';
import RightNavItem from './RightNavItem';

const LOGOS = [
 { name: 'home', svg },
 { name: 'home', svg },
];

const RightNav = () => (
 <div>
  {LOGOS.map(logo => (
    <RightNavItem name={logo.name}>
      <logo.svg />
    </RightNavItem>
   ))}
 </div>
);

export default RightNav;

孩子：

import React from 'react';

const RightNavItem = ({ name, children }) => (
 <div>
  {children}
  <span>{name}</span>
 </div>
);

export default RightNavItem;

你不需要像我一样导入 svg，如果你能够在你的 webpack 配置中使用 svg 作为组件，那么继续做你之前做的事情。

【讨论】：

嘿哈桑，谢谢你的回答。我尝试了类似于您建议的方法，但没有奏效。也许我做错了。我尝试导入（在 RightNav 上方）所有 SVG（所以现在它们是 React 组件），将其在 props 中传递给 RightNavItem，在每次迭代中适当，然后使用它。但由于某种原因，我在控制台中出现了这个错误：reactjs.org/docs/error-decoder.html/… 我没有提到我是 React 新手。
不用担心@YossiSaadi 我们所有人都在这里学习。所以你得到的错误是一个非常常见的错误。对象不能用作反应组件。但是你能做的就是这样。例如，如果您有来自 svgAsset 的对象。那么你可以这样做。如果你正确配置了 webpack，React 将允许这样做。同样，只需将整个对象传递给并尝试上述方法。
从你的错误中我也看到你正在使用生产版本。您应该使用开发版本。可以尝试使用 create-react-scripts。特别是对于新人来说，它让事情变得更容易！
@YossiSaadi 请查看以下链接。这显示了如何将 svg 作为源或组件导入。 facebook.github.io/create-react-app/docs/… 可能使用 src 会更容易。
Hasan，我不能使用 src 因为我需要在 SVG 组件的 CSS 中使用填充和描边。我设法按照您在这里的 cmets 建议的方式做到了。我使用了 {props.children}，而不是使用 map()，而是添加了 4 次，每个都有不同的“SVG”子组件和不同的道具“名称”，这样组件只会在 RightNavItem 初始化等级。谢谢你真的帮了我！

【解决方案2】：

我设法以一种丑陋的方式做到了这一点，但它确实有效。问题是如果我有超过 4 个项目，那么在没有 map() 函数的情况下使用它会很烦人。

我使用了 {props.children}，而不是使用 map()，而是添加了 4 次，每次都有不同的 'SVG' 子组件和不同的 props 'name'，这样组件只会在 RightNavItem 初始化级别。

如果有人知道我如何将它与 map() 函数一起使用，它会有很大帮助！感谢所有帮助过的人！

例如：

const RightNav = (props) => {
  return(
    <div className = "rightnav">
      <RightNavItem name = {home}>
        <HomeSVG />
      </RightNavItem>

      <RightNavItem name = {profile}>
         <ProfileSVG />
      </RightNavItem>
      .
      .
      .
    </div>
  );
};

在 RightNavItem 中：

const RightNavItem = (props) => {
  return(
    <div>
      {props.children}
      <span>{ props.name }</span>
    </div>
  );
};

【讨论】：