在React.js中实现Read More链接 [英] Implementing a Read More link in React.js

问题描述

我想尝试实现阅读更多链接，该链接会在点击后展开以显示
的更多文字。我试图这样做React方式。

I am trying to implement a Read More link, which expands to show more text after a click. I am trying to do this the React way.

<!--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>
    );
  }

});

我是React的新用户。我不知道如何处理render方法中的一切。

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?

推荐答案

因此，基本上你想显示一个额外的div取决于state属性'展开。

So basically you want to display an extra div depending on the state property 'expanded'.

您可以有条件地创建组件。如果你不想要一个组件，你可以只返回null。
我只是有一个小方法，如：

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:

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;
        }
    }
});

，您的渲染函数应为：

render: function() {
     var expandedDiv = this.getMoreTextDiv();
     return (
         <div>
             <a onClick={this.expandedText}>Read more</a>
             { expandedDiv }
         </div>
     );
}

每次调用 setState c $ c>您触发 render（）使用新状态。

如果展开为false，返回null作为组件，这意味着基本上，没有。所以什么都不会显示。

If expanded is false you are going to return null as a component, which means basically, nothing. So nothing will be displayed.

当您点击链接时，它会更新您的状态和扩展值，因此您将返回一个div作为组件，并将显示。

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.

我认为一个好的开始是阅读此。
这是一个非常好的文章，解释了render如何工作，以及与状态的链接。

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.

你还应该确保你理解这种小例子 http://jsfiddle.net/3d1jzhh2/1/ 来了解状态和渲染如何与每个其他。

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.

这篇关于在React.js中实现Read More链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！