时间戳

首页 > 解决方案 > React 向孩子们发送道具

reactjs - React 向孩子们发送道具

问题描述

我正在尝试将数据从 index.js 发送到 App，然后将其分发到应用程序的各个组件。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>
    )
  }

标签： reactjs

解决方案

不知道我的问题是否正确。

render 不接收参数。

您可以将其包装在展示组件中。

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

推荐阅读