Question

我很难理解如何构建一个相当简单的组件，该组件具有需要在嵌套组件内部访问的各种道具。我什至不认为这应该如何正确解释我的情况，无论我觉得这应该很简单。

我会解释。我的组件如下：

<Widget
  layout="small"
  header="This is the header"
  icon={<UploadIcon/>}
  title="This is the title"
  caption="This is the caption to a widget it should have a character count"
  to="/tosomwhere"
  href="http://www.website.com"
  link="Link Title"
/>

以及组件代码。

const Widget = (props) => {
  return (
    <WidgetWrapper layout={props.layout}>
      hello world
      {props.title}
    </WidgetWrapper>
  );
}

Widget.propTypes = {
  layout: PropTypes.oneOf(['small', 'large', 'dual']),
  header: PropTypes.string,
  icon: PropTypes.element,
  title: PropTypes.string,
  caption: PropTypes.string,
  to: PropTypes.string,
  href: PropTypes.string,
  link: PropTypes.string,
};

Widget.defaultProps = {
  layout: 'small'
};

export default Widget;

如您所见，我在组件内部包含一个组件。它的目的是纯粹的视觉效果（小部件的大小，颜色，外部），但它需要包装来自

的所有道具

我可以访问props.layout，因为它在组件外部，但是我不能访问props.title在属于该组件的内部。

这是怎么做的？我是否需要向下传递道具，以便可以通过这种方式访问道具？我尝试将props={props}添加到其中，但没有成功...

Answer 1

我认为您不应该在标签中包含类似道具。我编写React的方式是像在props.layout中一样，在标签内传递道具，然后在WidgetWrapper的代码中使用这些道具。

您无需使用代码中的每个道具，而可以使用散布运算符：

<WidgetWrapper {...props}/>

Answer 2

我不确定我是否完全理解您的问题。您是否要从WidgetWrapper访问Widget组件中的一些道具？在这种情况下，我认为您应该将您需要的东西传递下去。还是您有很多要传递给包装器的道具？

Answer 3

const RenderApp = props => {
  return (
    <div>
      hello {props.title}
    </div>
  );
}



class App extends React.Component {
  render(){
    return (      
        <RenderApp title="world"/>      
    );
  }
}

这对我有用，并打印出“ hello world” ...也许我错过了重点...

在嵌套组件中反应组件道具

3 个答案: