React：子供を文字列として取得する方法は？

私たちが構築している部品のAAカップルのためのドキュメントを書いていますので、また反応するコンポーネントであるドキュメントは、（次のようになります。React：子供を文字列として取得する方法は？

const myDoc =() => (
    <div> 
    <MyComponent title="MyTitle" /> 
    <code className="language-jsx"> 
     {`<MyComponent title="MyTitle" />`} 
    </code> 
    </div> 
)

はMyComponentの上の重複を参照してください。だから私は、「コード」コンポーネントを作成しました？その処理するために：

const myDoc =() => (
    <Code> 
    <MyComponent title="MyTitle" /> 
    </Code> 
)

が、コード内の子供が対象であることから、それはSTRとして表示されません。

const Code = ({ children }) => (
    <div> 
    {children} 
    <code> 
     {children} 
    </code> 
    </div> 
)

はその後MyDocでは今ありますing。

これを達成する方法はありますか？それとももっと良い解決策でしょうか？

出典

2016-09-30 Gileno

これを試してください。私もドキュメントを書いていたし、私もマークダウンファイルを毎回変更したくなかった

const MyComponent = ({ 
    title 
}) => (
    <div>{title}</div> 
) 

const MyDoc =() => (
    <Code> 
    <MyComponent title="My title" obj={{obj: {obj: 1}}}> 
     <MyComponent title="My another component title"> 
     <MyComponent title="My another component title" /> 
     </MyComponent> 
    </MyComponent> 
    </Code> 
) 

const Code = ({ 
    children 
}) => (
    <div> 
    {children} 
    <pre><code> 
     {JsxString(children)} 
     </code></pre> 
    </div> 
) 

const JsxString = (component, counter = 0) => { 
    let type = component.type.name; 
    let props = component.props; 
    let propsString = ""; 
    for (let key in props) { 
    if (key !== "children") { 
     let propValue = props[key]; 
     let value = ""; 
     if (propValue instanceof Object) { 
     value = `{${JSON.stringify(propValue).replace(/['"]+/g, '')}}`; 
     } else { 
     value = `"${propValue}"`; 
     } 
     propsString += ` ${key}=${value}`; 
    } 
    } 
    if (props.children) { 
    counter += 2; 
    var children = JsxString(props.children, counter); 
    return `<${type}${propsString}> 
${Array(counter).join(" ")} ${children} 
${Array(counter).join(" ")}</${type}>`; 
    } 
    return `<${type}${propsString} />`; 
} 

ReactDOM.render(
    <MyDoc />, 
    document.getElementById('container') 
);

出典

2016-09-30 21:43:18

賢明な考え方です。私はそれを使っていくつかのバグを見つけました（例：子供がアイテム（兄弟）の配列である場合）。しかし、これは良いスタートです。ありがとう！ – Gileno