Question

我想将道具从一个组件传递到另一个组件，并在第二个组件中将其用于组件声明上方的导入

这用于使用相同的组件，而无需每次使用另一个SVG都创建4次。

我正在使用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;

。

Answer 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。

Answer 2

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

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

如果有人知道如何在map（）函数中使用它，它将大有帮助！感谢所有提供帮助的人！

例如：

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

在RightNavItem中：

+----------+-------------------+-------------------+-------------+
|Event_Type|              start|                end|agg_sum_10_15|
+----------+-------------------+-------------------+-------------+
|    event1|2016-04-25 05:30:00|2016-05-02 05:30:00|          1.0|
|    event1|2016-05-09 05:30:00|2016-05-16 05:30:00|          3.0|
|    event1|2016-06-06 05:30:00|2016-06-13 05:30:00|          3.0|
|    event2|2016-05-09 05:30:00|2016-05-16 05:30:00|          1.0|
|    event2|2016-06-06 05:30:00|2016-06-13 05:30:00|          1.0|
|    event3|2016-05-16 05:30:00|2016-05-23 05:30:00|          1.0|
|    event3|2016-06-13 05:30:00|2016-06-20 05:30:00|          1.0|
+----------+-------------------+-------------------+-------------+

React Javascript中有没有办法传递道具并将其用于外部导入？

2 个答案: