Question

我刚刚开始学习React，正在创建组件并将道具传递给他们。

在下面的示例中，我是否必须在JSX元素中引用道具（我已经看到了引用道具但没有引用道具并且两个选项都可行的示例）：

const name = 'Jonny'

function Name (props) {
  return (
    <h1>Name: {props.name}</h1>
  )
}

ReactDOM.render(
  <Name name={name} />,
  document.getElementById('app')
)

如果我只删除这一行中的props引用就运行完全相同的代码，它似乎也可以正常工作：

h1>Name: {name}</h1>

我的问题是，那时的道具引用是否必须存在，否则，为什么有时将其放置在那里？

Answer 1

这是因为，您已全局定义了state = { API_DATA : {}, TEAM_WIKI : '' } componentDidMount(){ // fetch the obj1 data and sets it to the state called API_DATA } wikiLink = (TEAM_NAME) { // getting TEAM_NAME from a component inside the render method const wiki = this.state.API_DATA.map(provider => { if (provider.team_name = TEAM_NAME && provider.team_wiki !== null) { return provider.team_wiki } }) .map(link => { if (link !== undefined) { return link } }) this.setState({ // TEAM_WIKI is a state { its a string } where i want to store the //team_wiki at last TEAM_WIKI : wiki }) } render() { return ( // i want to use it something like this < href="this.state.TEAM_WIKI" onClick={this.wikiLink(TEAM_NAME)} /> ) }变量，并使用相同的键name在props中传递了名称值。

因此，在这种情况下：name，它将采用全局定义的名称值；对于<h1> {name}</h1>，它将采用在props中传递的值，而不是全局值。

现在，如果您想查看差异，则使用ex的其他键在props中传递名称值：

<h1>{props.name}</h1>

并使用<Name nameValue={name} />进行渲染，您将看不到任何内容，因为<h1> {props.name} </h1>对象中没有name键。

但是，如果您使用props，则会看到正确的值。

Answer 2

由于全局变量与使用它的组件位于同一个文件中，因此它既可以使用props也可以使用它。

简而言之，如果您将值作为prop传递给组件，则需要从props访问值

以您的情况

<Name name={name} />

name被传递了一个prop，因此像props.name那样访问它是正确的事情，因为Name组件也可能是从其他地方渲染的。名称变量可能未定义为全局变量。

Answer 3

<h1>Name: {name}</h1>起作用的原因是您有一个const name = 'Jonny'。当需要另一个组件将props.name的值传递到下一个组件时，使用name。例如说下面的代码：

...
render(){
return (<DisplayName name='Johnny' />)
}

在DisplayName组件中，您需要像这样通过name访问props.name：

render(){
  return() => (
    <h1>{this.props.name}</h1>
    )
  }

OR：

DisplayName = ({name}) => ( // destructing name from the props received
<h1>{name}</h1>
)

Answer 4

这是因为您在同一文件中定义了名称。在组件文件之外定义名称，并将其通过父组件传递

父文件：

 function ParentComponent = () => {
 return (
   <Child name='John' />
 )
}

子文件：

 function Child (props) {
  return (
     <p>{props.name}</p>
  )
}

Answer 5

为了使道具显示在子组件中，您需要在创建组件定义时将其包括在内。我认为您的实例中发生的事情是定义名称，然后使用{name}进行引用。这不是从props中提取，而是从define const变量中提取。

您无需传递示例即可使用示例，因为它可以定义应用程序，除非您将示例传递至react应用程序（在这种情况下），就不需要示例。

您可能会创建一个子组件，在这种情况下，您可能希望在该子组件上设置道具以在所述组件中使用。可以按照您的步骤进行操作，但是不能在ReactDOM.render部分中完成。

Answer 6

您必须使用props.name，这两种情况下对您都起作用的唯一原因是同一文件中的全局名称变量。
您可以通过在组件中传递一些其他字符串作为prop来进行尝试。

Answer 7

您显示的示例是无状态功能组件的示例，因此，当您使用无状态功能组件时，反应会自动将props引用到该组件方法。

在ES6对象分解功能中，您可以避免每次都放置{props.name}。

您可以使用属性名称直接访问它。您无需每次都引用道具。

所以这两种情况都可以。

将道具传递到React组件

7 个答案: