Append StyledComponents by d3? about react-faux-dom HOT 4 CLOSED

I'm not sure what you mean exactly. There's nothing in ReactFauxDOM to do what you have shown, so I presume it's another library for creating styled nodes?

I think you may just have to use CSS since I haven't done anything like this. Maybe try some things out and see what you get 😄

from react-faux-dom.

Sorry to be ambiguous, I just want to do this:

// these two example will work:

// append some reace element
const svg1 = select(faux).append('svg')
svg1.append(() => <circle
      className="path"
      cx="25"
      cy="25"
      r="20"
/>)

// Above has the same effect as below
const svg2 = select(faux).append('svg')
svg2
      .append('circle')
      .attr('cx', 25)
      .attr('cy', 25)
      .attr('r', 20);

But now, if I append a react element, and trying to append something to that react element, error saying this.appendChild is not a function will be thrown:

// this can't work
const svg3 = select(faux).append(() => <svg />)
svg3
      .append('circle')
      .attr('cx', 25)
      .attr('cy', 25)
      .attr('r', 20);


// though this will not throw:
const svg4 = select(faux).append(() => <svg />)

What happened to this.appendChild? So I couldn't add a react element to faux?

from react-faux-dom.

appendChild does exist, so I would check what this is at that point. Maybe it's not what you expect.

Oh, I just realised that you can't do that last example though, no. You can put a React tree inside of a FauxDOM tree, but you can't then append children to the React tree because it's React.

You're doing something like this: Faux -> Append React child -> Append Faux child to React child.

React does not support mutation like this, you should just use FauxDOM nodes if you wish to mutate their children, which is what you're doing. The FauxDOM only supports React nodes at the leaves of your tree, ideally everything would be FauxDOM nodes in the tree though, that's what it was designed for.

Build your Faux DOM tree, turn it into a React tree when you're done. Embedding React in the Faux DOM tree was an afterthought just in case someone needed to do it.

from react-faux-dom.

Thanks for explaining it, it's reasonable.

instead of traditional d3 way:

const svg = select(faux).append('svg')
svg
      .append('circle')
      .attr('cx', 25)
      .attr('cy', 25)
      .attr('r', 20);

The advantage of appending React child is that we can do:

const Circle = styled.circle`
  cx: ${props => props.cx};
  cy: ${props => props.cy};
  r: ${props => props.r};
`;
const svg = select(faux).append(() => <svg />)
svg.append(() => <Circle cx={25} cy={25} r={5} />)

But the React way, Other than being fancy and state of art, well, that's actually not so convenient...Just looks cool.

from react-faux-dom.