Javascript 在无状态子组件中传递/访问道具

Passing/Accessing props in stateless child component

提问by Paulos3000

I know you can pass all a react components props to it's child component like this:

我知道您可以像这样将所有反应组件道具传递给它的子组件：

const ParentComponent = () => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...this.props} />
   </div>
)

But how do you then retrieve those props if the child component is stateless? I know if it is a class component you can just access them as this.prop.whatever, but what do you pass as the argument into the stateless component?

但是，如果子组件是无状态的，那么您如何检索这些道具呢？我知道如果它是一个类组件，您可以将它们作为 访问this.prop.whatever，但是您将什么作为参数传递给无状态组件？

const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)

回答by Shubham Khatri

When you write

当你写

const ChildComponent = ({ someProp }) => (
   <div>
      <h1>Child Component {someProp}</h1>
   </div>
)

From all the props that you are passing to the childComponentyou are just destructuring to get only someProp. If the number of props that you want to use in ChildComponents are countable(few) amongst the total number of props that are available, destructuring is a good option as it provides better readability.

从您传递给的所有道具中，您childComponent只是在解构以获取someProp. 如果您想在 ChildComponents 中使用的道具数量在可用道具总数中是可数的（很少），那么解构是一个不错的选择，因为它提供了更好的可读性。

Suppose you want to access all the props in the child component then you need not use {}around the argument and then you can use it like props.someProp

假设你想访问子组件中的所有道具，那么你不需要{}在参数周围使用，然后你可以像这样使用它props.someProp

const ChildComponent = (props) => (
   <div>
      <h1>Child Component {props.someProp}</h1>
   </div>
)

回答by adz5A

Are you looking for the ES6 named argument syntax (which is merely destructuring) ?

您是否正在寻找 ES6 命名参数语法（这只是解构）？

const ChildComponent = ({ propName }) => (
    <div>
     <h1>Child Component</h1>
 </div>
)

const ChildComponent = (props) => ( // without named arguments
    <div>
     <h1>Child Component</h1>
 </div>
)

Optionally there is a second argument to your function depending of whether you specified a contextfor your component or not.

可选地，您的函数还有第二个参数，具体取决于您是否为组件指定了上下文。

Perhaps it would be more helpful wityh a links to the docs. As stated in the first article about functional components. Whatever props passed on to the component is represented as an object passed as first argument to your functional component.

也许有一个指向文档的链接会更有帮助。如关于功能组件的第一篇文章所述。传递给组件的任何道具都表示为作为第一个参数传递给功能组件的对象。

To go a little further, about the spread notation within jsx.

更进一步，关于 jsx 中的扩展符号。

When you write in a component :

当您在组件中编写时：

<Child prop1={value1} prop2={value2} />

What your component will receive is an plain object which looks like this :

您的组件将收到一个普通对象，如下所示：

{ prop1: value1, prop2: value2 }

(Note that it's not a Map, but an object with only strings as keys).

（请注意，它不是 Map，而是仅以字符串作为键的对象）。

So when you're using the spreadsyntax with a JS object it is effectively a shortcut to this

因此，当您将扩展语法与 JS 对象一起使用时，它实际上是一种快捷方式

const object = { key1: value1, key2: value2 }
<Component {...object}/>

Is equivalent to

相当于

<Component key1={value1} key2={value2} />

And actually compiles to

实际上编译为

return React.createElement(Component, object); // second arg is props

And you can of course have the second syntax, but be careful of the order. The more specific syntax (prop=value) must come last : the more specific instruction comes last.

您当然可以使用第二种语法，但要注意顺序。更具体的语法 (prop=value) 必须放在最后：更具体的指令放在最后。

If you do :

如果你这样做：

<Component key={value} {...props} />

It compiles to

它编译为

React.createElement(Component, _extends({ key: value }, props));

If you do (what you probably should)

如果你这样做（你可能应该这样做）

<Component {...props} key={value} />

It compiles to

它编译为

React.createElement(Component, _extends(props, { key: value }));

Where extends is *Object.assign (or a polyfill if not present).

其中 extends 是 *Object.assign （如果不存在，则为 polyfill）。

To go further I would really recommend taking some time to observe the output of Babel with their online editor. This is very interesting to understand how jsx works, and more generally how you can implement es6 syntax with ES5 tools.

为了更进一步，我真的建议花一些时间用他们的在线编辑器观察 Babel 的输出。了解 jsx 是如何工作的，以及更一般地如何使用 ES5 工具实现 es6 语法非常有趣。

回答by anand

const ParentComponent = (props) => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...props} />
   </div>
);

const ChildComponent = ({prop1, ...rest}) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <GrandChildComponent {...rest} />
  </div>
}

const GrandChildComponent = ({prop2, prop3})=> {
  <div>
    <h1>Grand Child Component with prop2={prop1} and prop3={prop3}</h1>
  </div>
}

回答by HoldOffHunger

This is a great tactic for reducing code bloat. Here's an example with ParentClass.js:

这是减少代码膨胀的好方法。这是一个示例ParentClass.js：

import React from 'react';
import SomeComponent from '../components/SomeComponent.js';

export default class ParentClass extends React.Component {
    render() {
        <SomeComponent
            {...this.props}
        />
    }
}

If I do, <ParentClass getCallBackFunc={() => this.getCallBackFunc()} />, or if I do <ParentClass date={todaysdatevar} />, the props getCallBackFuncor datewill be available to the SomeComponentclass.

如果我这样做了，<ParentClass getCallBackFunc={() => this.getCallBackFunc()} />或者如果我这样做了<ParentClass date={todaysdatevar} />，道具getCallBackFuncordate将可供SomeComponent全班使用。

Source: https://zhenyong.github.io/react/docs/transferring-props.html

来源：https: //zhenyong.github.io/react/docs/transferring-props.html

回答by Lionel

I thought I would add a simple ES2015, destructuring syntax I use to pass all props from a functional parent to a functional child component.

我想我会添加一个简单的 ES2015 解构语法，用于将所有道具从功能父组件传递到功能子组件。

const ParentComponent = (props) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

Or if I have multiple objects (props of parent, plus anything else), I want passed to the child as props:

或者如果我有多个对象（父母的道具，加上其他任何东西），我想作为道具传递给孩子：

const ParentComponent = ({...props, ...objectToBeAddedToChildAsProps}) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

This destructuring syntax is similar to the above answers, but it is how I pass props along from functional components, and I think it is really clean. I hope it helps!

这种解构语法类似于上面的答案，但它是我从功能组件传递 props 的方式，我认为它非常干净。我希望它有帮助！

回答by ruucm

Using this

使用这个

const ParentComponent = ({ prop1, prop2, prop3 }) => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...{ prop1, prop2, prop3 }} />
   </div>
);

const ChildComponent = ({ prop1, prop2, prop3 }) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <h1>Child Component with prop2={prop2}</h1>
    <h1>Child Component with prop2={prop3}</h1>
  </div>
}

回答by prosti

But how do you then retrieve those props if the child component is stateless?

但是，如果子组件是无状态的，那么您如何检索这些道具呢？

const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)

---

---

ChildComponentholds the name and the propswill be the argument in the arrow function syntax just as you need:

ChildComponentprops正如您需要的那样，保存名称并且将作为箭头函数语法中的参数：

 const ChildComponent = props => (
   <div>
     <p>{props.value ? props.value : "No value."}</p>
   </div>
 );

If you Babel-it it will create something like this:

如果您使用 Babel-it，它将创建如下内容：

 var ChildComponent = function ChildComponent(props) {
   return React.createElement(
     "div",
     null,
     React.createElement(
       "p",
       null,
       props.value ? props.value : "No value."
     )
   );
 };

回答by skube

For some reason, what seems to work for me is a variation on Shubham's answer above:

出于某种原因，似乎对我有用的是上面 Shubham 答案的一个变体：

const ChildComponent = props => (
   <div>
      <h1>Child Component {props[0].someProp}</h1>
   </div>
)