如何使用.在react中的return函数之外

Question

我目前正在实现isFetching标志，一切正常。为了更好地构建代码，我使用了一个三元运算符：{isFetching? isLoading : isLoaded}

在isLoaded部分中，我使用this.。然而，这会导致错误消息：

Parsing error: Unexpected keyword 'this'

为什么我不能在返回函数之外使用this？

export class Story extends Component {
static propTypes = {
story: PropTypes.array.isRequired,
getStory: PropTypes.func.isRequired,
deleteStory: PropTypes.func.isRequired
};
componentDidMount() {
this.props.getStory();
}


render() {
const stories = this.props.story;
const isFetching = this.props.isFetching;
const isLoaded = (
{ this.props.story.map((story, index) =>
<MDBRow id={index} key={story.id} style={{ margin: "10px",display: "inline-block" }}>
<MDBCol >
<MDBCard style={{ width: "22rem"}}>
<MDBCardImage className="img-fluid" src={pic} waves />
<MDBCardBody>
<MDBCardTitle>Title: {story.title}</MDBCardTitle>
<MDBCardTitle>Place: {story.place}</MDBCardTitle>
<MDBCardTitle>Author: {story.author.username}</MDBCardTitle>
<MDBCardText>
{story.content}
</MDBCardText>
<audio
controls
src={story.audio.url}>
Your browser does not support the
<code>audio</code> element.
</audio>
{story.story_owner_permission === true ? <MDBBtn href="#">Click me</MDBBtn> : null }
<Link
to={"/story/" + story.id}
className="badge badge-warning"
style={{marginLeft: '100px'}}
>
Details
</Link>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
)
}
)
const isLoading  = (
<h3>Loading...</h3>
)
return (
<Fragment>
<h2>Stories</h2>
{isFetching? isLoading : isLoaded}
</Fragment>
);
}
}

function mapStateToProps(state, ownProps) {
const { story } = state.story
const isFetching = state.isFetching
return { story, isFetching}
}

export default connect(
mapStateToProps,
{ getStory, deleteStory}
)(Story);

也许这是一个愚蠢的问题，无论如何，我很高兴得到任何澄清？

Answer 1

您可以在返回外部使用this。您不能在Class之外使用它。问题出在你的语法上。而不是有这种无效的语法

const isLoaded = ({ this.props.story.map((story, index) => ...

尝试这样做：

const load = () =>
this.props.story.map((story, index) => (
<MDBRow id={index} key={story.id} style={{ margin: '10px', display: 'inline-block' }}>
<MDBCol>
<MDBCard style={{ width: '22rem' }}>
<MDBCardImage className="img-fluid" src={pic} waves />
<MDBCardBody>
<MDBCardTitle>Title: {story.title}</MDBCardTitle>
<MDBCardTitle>Place: {story.place}</MDBCardTitle>
<MDBCardTitle>Author: {story.author.username}</MDBCardTitle>
<MDBCardText>{story.content}</MDBCardText>
<audio controls src={story.audio.url}>
Your browser does not support the
<code>audio</code> element.
</audio>
{story.story_owner_permission === true ? <MDBBtn href="#">Click me</MDBBtn> : null}
<Link
to={`/story/${story.id}`}
className="badge badge-warning"
style={{ marginLeft: '100px' }}
>
Details
</Link>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
))

然后

{isFetching ? isLoading : <div>{load()}</div>}