React 将 Props 传递给无状态功能组件答案

【问题标题】：React Pass Props to a Stateless Functional ComponentReact 将 Props 传递给无状态功能组件
【发布时间】：2019-06-14 02:03:01
【问题描述】：

AuthLinks 组件应该在 Notifications 组件的 notificationCount 中渲染来自 notificationCount 属性的值

我想从 notificationCount 获取 AuthLinks 组件的值，但是变量的值似乎应该在 AuthLinks 上。

const AuthLinks = props => {
  return (
    <div>
      <NavLink to="/notifications">
        Notifications
        <span  data-badge={props.notificationCount} />
      </NavLink>

    </div>
  );
};


import React, { Component } from "react";
import { Link } from "react-router-dom";


class Notifications extends Component {
  constructor(props) {
    super(props);

    this.state = {
      notifications: [],

    };
  }

  componentWillMount() {
    fetch("/notifications")
      .then(response => {
        return response.json();
      })
      .then(data => {
        this.setState({ notifications: data });
      });

  }



  render() {

    let notificationCount = this.state.notifications.length;
    let notifications = this.state.notifications.map(notification => {
      return (
        <ul>
          <li>
            <Link to={`/posts/${notification.post.title}`}>


              <div>

                {notification.post.title}
              </div>

            </Link>

          </li>
        </ul>
      );
    });

    return (
      <div className="column col-9">

          {notificationCount}
          {notifications}

      </div>
    );
  }

导出默认通知；

不显示错误消息，但也没有呈现值

【问题讨论】：

你在哪里使用你的AuthLinks 组件？

标签： javascript reactjs

【解决方案1】：

您好，在您的通知组件中，您尚未将任何道具传递给 Authlinks 功能组件。

如果我没记错的话，如果你想将 props 传递给 Authlinks，你的 Notifications 组件应该是这样的

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Authlinks from 'your path'

class Notifications extends Component {
  constructor(props) {
    super(props);

    this.state = {
      notifications: [],

    };
  }

  componentWillMount() {
    fetch("/notifications")
      .then(response => {
        return response.json();
      })
      .then(data => {
        this.setState({ notifications: data });
      });

  }



  render() {

    let notificationCount = this.state.notifications.length;
    let notifications = this.state.notifications.map(notification => {
      return (
        <ul>
          <li>
            <Link to={`/posts/${notification.post.title}`}>


              <div>

                {notification.post.title}
              </div>

            </Link>

          </li>
        </ul>
      );
    });

    return (
      <div className="column col-9">

          {notificationCount}
          {notifications}
          <Authlinks notificationCount={notificationCount}/>
      </div>
    );
  }

【讨论】：

【解决方案2】：

另一种优雅的方式来做同样的事情。

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Counter(props) {
  const {
    count: [count, setCount]
  } = {
    count: useState(0),
    ...(props.state || {})
  };

  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h2>Lifted state</h2>
      <Counter state={{ count: [count, setCount] }} />
      <Counter state={{ count: [count, setCount] }} />
      <h2>Isolated state</h2>
      <Counter />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案3】：

如果要传递props，请将属性设置为组件

<AuthLink notificationCount={...} />

【讨论】：