support more complicated code example ?

[zzswang]

suppose we want to show how to interact with a component

like following code in markdown

const Test = React.createClass({
  getInitialState() {
    return {
      loading: false,
      visible: false,
    };
  },
  showModal() {
    this.setState({
      visible: true,
    });
  },
  handleOk() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  },
  handleCancel() {
    this.setState({ visible: false });
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open modal dialog
        </Button>
        <Modal
          visible={this.state.visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  },
});

ReactDOM.render(<Test />, mountNode);

[fernandopasik]

@zzswang would you like to add all this code into a <code> element and execute it?

[zzswang]

hi @fernandopasik

I didn't get it, what's your point?

Above code, which I want to show how to use Modal component. Some times we need a bit of code to handle the state changing, to let others learn the example.

[fernandopasik]

I see. At the moment we don't have support for a complex implementation of a component. We just use it to instantiate components. Event if you use the just render part of your code in a code element, there's no way right now to handle the state of the wrapped react component.

[iamdaning]

Hello, I am using this component, there is a doubt, I want to display javascript code, thank you ~ Sorry, English is not my native language.