Question

我在React中用状态写了一个简单的例子。我有一个按钮，当我点击这个按钮时，我想显示一条消息，但是我在视图中看不到任何内容，控制台中没有错误......任何人都可以帮助我吗？感谢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React State</title>
        <script src="https://unpkg.com/react@0.14.0/dist/react-with-addons.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
    </head>
<body>
    <div id="clickableButton"></div>

    <script type="text/babel">
        var myButton = React.createClass({
            getInitialState: function() {
                return { clicked: false };
            },
            render: function() {
                    if(this.state.clicked) return <div><button onclick="{doClick}">Click me</button> Clicked!</div>;
                    else return <div><button onclick="{doClick}">Click me</button></div>;
                }
            },
            doClick: function() {
                if(this.state.clicked) this.setState({ clicked: false });
                else this.setState({ clicked: true });
            }
        });
        ReactDOM.render(<myButton />, document.getElementById("clickableButton"));
    </script>
</body>
</html>

Answer 1

您的大括号不正确，请移除render中的多余大括号：

render: function() {
  if(this.state.clicked) return <div><button>Click me</button> Clicked!</div>;
  else return <div><button>Click me</button></div>;
} << REMOVE THIS LINE
},

此外，您应该为您的组件使用大写字母，因此将myButton重命名为MyButton：

var MyButton = React.createClass({
...
ReactDOM.render(<MyButton />, document.getElementById("clickableButton"));

现在应该可以了。

简单的React示例，状态不起作用

1 个答案: