[英]React Pass Props to a Stateless Functional Component
The AuthLinks component should render the value from the notificationCount prop in the notificationCount on Notifications Component AuthLinks 组件应该在 Notifications 组件上的 notificationCount 中呈现来自 notificationCount 属性的值
I'd like to get the value from notificationCount to AuthLinks component, but as is a value from a variable seems that should be on AuthLinks.我想从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>
);
}
export default Notifications;导出默认通知;
Show no error messages but, did not render the value either不显示错误消息,但也没有呈现值
hello in your Notificatiions component you have not passed any props to Authlinks functional component.您好,在您的 Notificatiions 组件中,您没有将任何道具传递给 Authlinks 功能组件。
if I am not wrong your Notifications component should look like this if you want to pass props to Authlinks如果我没有错,如果您想将道具传递给 Authlinks,您的通知组件应该如下所示
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>
);
}
Another elegant way to do the same.另一种优雅的方式来做同样的事情。
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);
More : https://codesandbox.io/s/z3431proxl?from-embed更多: https : //codesandbox.io/s/z3431proxl?from-embed
如果要传递 props,请将属性设置为 Component
<AuthLink notificationCount={...} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.