javascript 在 React.js 中实现 Read More 链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29996048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Implementing a Read More link in React.js
提问by Adi Sivasankaran
I am trying to implement a Read Morelink, which expands to show
more text after a click. I am trying to do this the React way.
我正在尝试实现一个Read More链接，该链接会在单击后展开以显示更多文本。我正在尝试以 React 的方式做到这一点。
<!--html-->
<div class="initialText">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<a>
Read More
</a>
</div>
<div class="fullText">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
/* JavaScript */
/* @jsx DOM */
var component = React.createClass({
getInitialState: function() {
return {
expanded: false
};
},
expandedText: function() {
this.setState({
expanded: true
});
},
render: function() {
return (
<div>
</div>
);
}
});
I am new to React. I am not sure how to handle everything inside the render method. How can I implement this functionality in pure React?
我是 React 的新手。我不确定如何处理渲染方法中的所有内容。如何在纯 React 中实现此功能？
采纳答案by Jeremy D
So basically you want to display an extra div depending on the state property 'expanded'.
所以基本上你想根据状态属性“扩展”显示一个额外的 div。
You can create a component conditionally. If you don't want a component you can just return null. I would just have a small method like:
您可以有条件地创建组件。如果你不想要一个组件，你可以只返回 null。我只会有一个小方法，如：
var component = React.createClass({
getInitialState: function() {
return {
expanded: false
};
},
expandedText: function() {
this.setState({
expanded: true
});
},
getMoreTextDiv: function() {
if (this.state.expanded) {
return <div> My extended content </div>;
} else {
return null;
}
}
});
and your render function should become:
你的渲染功能应该变成：
render: function() {
var expandedDiv = this.getMoreTextDiv();
return (
<div>
<a onClick={this.expandedText}>Read more</a>
{ expandedDiv }
</div>
);
}
Each time you call setState()you trigger render()using the new state.
每次调用时setState()都会render()使用新状态触发。
If expanded is false you are going to return null as a component, which means basically, nothing. So nothing will be displayed.
如果expanded 为false，您将返回null 作为组件，这意味着基本上什么都没有。所以什么都不会显示。
When you click on your link it will update your state and the expanded value, so you will return a div as a component and it will be displayed.
当您单击链接时，它会更新您的状态和扩展值，因此您将返回一个 div 作为组件并将其显示出来。
I think a good start would be to read this. This is a really great article and explains how render basically works, and the link with state.
我认为阅读这篇文章是一个好的开始。这是一篇非常棒的文章，解释了渲染的基本工作原理，以及与状态的链接。
You should also make sure you understand this kind of small example http://jsfiddle.net/3d1jzhh2/1/to see how state and render are linked with each other.
您还应该确保您了解这种小示例http://jsfiddle.net/3d1jzhh2/1/以查看状态和渲染是如何相互关联的。
回答by Pratik Kumar
You can try the read-more-react library, link: https://www.npmjs.com/package/read-more-react
可以试试read-more-react库，链接：https: //www.npmjs.com/package/read-more-react
npm install --save read-more-react
import ReadMoreReact from 'read-more-react';
<ReadMoreReact
text={yourTextHere}
min={minimumLength}
ideal={idealLength}
max={maxLength}
/>
回答by Emil Ingerslev
You're pretty much on the right track. As stated in the react docs here: https://facebook.github.io/react/tips/if-else-in-JSX.html
你几乎走在正确的轨道上。正如这里的反应文档中所述：https: //facebook.github.io/react/tips/if-else-in-JSX.html
it's just using a classic ifand a variable, like this:
它只是使用经典if和变量，如下所示：
render: function() {
var expandedContent;
if (this.state.expanded) {
expandedContent = <div>some details</div>;
}
return (
<div>
<div>Title or likewise</div>
{expandedContent}
</div>
);
}
回答by YASH DAVE
I know I'm little late to answer this question but instead of using 2 strings why don't you do it by using just 1 string only.
我知道我回答这个问题有点晚了，但是为什么不使用 2 个字符串，为什么不只使用 1 个字符串来做呢。
check out this npm package https://www.npmjs.com/package/react-simple-read-moreIt'll solve the problem.
看看这个 npm 包https://www.npmjs.com/package/react-simple-read-more 就可以解决问题了。
In case you are interested in code: https://github.com/oztek22/react-simple-read-more/blob/master/src/string-parser.jsx
如果您对代码感兴趣：https: //github.com/oztek22/react-simple-read-more/blob/master/src/string-parser.jsx
