如何将参数传递到使用ES6类定义的React组件中

Question

考虑一下这个在ES6类中定义的简单博客组件：

import React from "react";
import ReactDOM from "react-dom";
class Blog extends React.Component {
Sidebar(props) {
return (
<ul>
{props.posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React from npm." }
];
render() {
return (
<this.Sidebar posts={this.posts} />
);
}
}
ReactDOM.render(<Blog />, document.getElementById("root"));
export default Blog;

当我想把变量posts传递给Sidebar道具时，我可以写

<this.Sidebar posts={this.posts} />

在render方法中。

但是，如果我导出Blog组件并像这样导入它(变量posts从Blog组件中删除(：

import React from 'react';
import ReactDOM from 'react-dom';
import Blog from './Blog'
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React from npm." }
];
ReactDOM.render(<Blog posts={posts} />, document.getElementById('root'))

它似乎不起作用。如何将变量posts传递给导入的Blog组件？

Answer 1

当您将posts因子化为全局变量并将其传递到Blog组件时，它在Blog:中变为this.props.posts

class Blog extends React.Component {
Sidebar(props) {
return (
<ul>
{props.posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
render() {
return (
<this.Sidebar posts={this.props.posts} />           // <--- Change this
);
}
}

Answer 2

将边栏定义为静态方法：-

import React from "react";
import ReactDOM from "react-dom";
class Blog extends React.Component {
// static sidebar component method
static Sidebar(props) {
return (
<ul>
{props.posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React from npm." }
];
render() {
return (
<Blog.Sidebar posts={this.props.posts || this.posts} />
);
}
}
ReactDOM.render(<Blog />, document.getElementById("root"));
export default Blog;

并像这样传递道具：-

import React from 'react';
import ReactDOM from 'react-dom';
import Blog from './Blog'
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React from npm." }
];
ReactDOM.render(<Blog.Sidebar posts={posts} />, document.getElementById('root'))