反应发送道具儿童

Question

我想从index.js将数据发送到应用程序，然后将其分配给应用程序的各种组件。它与Cannot read property 'name' of undefined未能在该标记render({ name, street, state })

这里有什么我不明白的问题？

我有我传递在下面的测试数据：

let data = {
    from : {
      name: "Full Name",
      street: "123 Fake St.",
      state: "Boston, MA 02118",
    },
    to : {
      name: "Mrs. Receiver",
      street: "123 Fake St.",
      state: "San Francisco, CA 94101",
    }
  }

然后，我有这个类来接受它，并将其发送给它的孩子

class App extends Component {
  render() {
    const { from, to } = {...this.props.data }

    return (
      <div className="Envelope">
        <Stamp />
        <From data={ from } />
        <To data={ to } />
      </div>
    );
  }
}

然后，我有这样的孩子，例如：

  render({ name, street, state }) {
    return (
      <div className="From">
            <span>
                { name }
            </span>
            <br />
            <span>
                { street }
            </span>
            <br />
            <span>
                { state }
            </span>
      </div>
    )
  }

Answer 1

不知道是不是我把你的问题的权利。

使不接收参数。

您可以在表象成分包裹。

const Child = ({name,street,state}) => (<div> className="From"> 
   <span>{ name }</span>
            <br />
    <span>{ street }</span>
            <br />
   <span>{ state }</span></div>)

并在以后使用它像

<Child name={name} street={street} state={state} />

如果你有更复杂的逻辑，你应该考虑使用一个类和React.Component延长

Answer 2

主要的问题似乎是，你指的是data作为this.props.data当它是一个全局变量。

因此，它应该是const { from, to } = {...data }。

Answer 3

我得到它的工作，和我张贴下面的答案。

所以，首先我的文件象下面这样：

-index.js
-app.js
--Components (folder)
--From.js
--To.js

起初，我有下面的数据声明

let data = {
  from : {
    name: "Full Name",
    street: "123 Fake St.",
    state: "Boston, MA 02118",
  },
  to : {
    name: "Mrs. Receiver",
    street: "123 Fake St.",
    state: "San Francisco, CA 94101",
  }
}

内index.js并在数据通过<App data={data}而不是发送到App.js，我把它给App.js本身并删除发送数据到App.js.的需要于是，我写了下面的代码App.js：

<From
        name={data.from.name}
        street={data.from.street}
        state={data.from.state}
    />
    <To
        name={data.to.name}
        street={data.to.street}
        state={data.to.state}
    />

将数据发送到从和到组件。然后我写了From.js和To.js下面简单的功能：

From.js

export default function From({name, street, state}) {
  return (
    <div>
      {name} <br />
      {street} <br />
      {state}
    </div>
  )
}

To.js

import React from 'react'

export default function To({name, street, state}) {
  return (
    <div>
      {name} <br />
      {street} <br />
      {state}
    </div>
  )
}

做这样的帮助我了解道具更好的逻辑，希望这将是其在这方面的问题的人有帮助...